如何修改Quill.js文本编辑器占位符的字体颜色

Quill的snow主题并没有使用原生的::placeholder伪元素渲染占位符，而是通过生成一个带.ql-placeholder类的<span>元素实现的，所以你之前写的CSS选择器无法选中目标元素，自然不会生效。

直接针对Quill的占位符类编写样式，结合Bootstrap的暗模式标识（通常是[data-bs-theme="dark"]属性，若你的项目是通过给body加.dark类触发暗模式，可对应调整），就能实现颜色随模式切换：

/* 可选：自定义正常模式下的占位符颜色 */
#editor .ql-placeholder {
    color: #6c757d; /* 匹配Bootstrap默认次要文本色 */
}

/* 暗模式下的占位符颜色 */
[data-bs-theme="dark"] #editor .ql-placeholder {
    color: #adb5bd; /* 匹配Bootstrap暗模式次要文本色，也可直接设为white */
}

如果你的暗模式是通过.dark类触发，修改选择器即可：

.dark #editor .ql-placeholder {
    color: white;
}

注意要保证自定义CSS加载在Quill默认样式之后，这样才能覆盖默认样式。若仍不生效，可适当提升选择器优先级，比如：

[data-bs-theme="dark"] #editor .ql-placeholder {
    color: white !important;
}

（优先通过调整选择器权重解决，尽量少用!important）

内容的提问来源于stack exchange，提问作者Osmanys Pérez Peña