嘿，我来帮你理清在Quill.js里创建新主题的正确方式～

1. 是否必须扩展现有主题？ #

答案是不一定，但扩展现有主题会高效很多。Quill的主题系统基于类继承设计，如果你只是调整外观、不需要修改核心功能，直接继承SnowTheme或BubbleTheme能省去大量重复工作；当然你也可以从零开始继承最基础的BaseTheme，但这需要实现更多底层逻辑，一般不推荐这么做。

2. 创建并注册新主题的完整步骤 #

步骤1：定义你的主题类 #

先创建一个自定义主题类，继承自Quill的现有主题（比如SnowTheme）。如果只是改样式，大部分逻辑可以直接复用父类，只需要按需重写部分方法或添加自定义类名：

// 基于ES模块环境的示例，CommonJS环境可调整导入方式
import Quill from 'quill';
import SnowTheme from 'quill/themes/snow';

class CustomTheme extends SnowTheme {
  // 比如自定义工具栏的DOM结构或类名
  extendToolbar(toolbar) {
    // 先调用父类的方法保留原有逻辑
    super.extendToolbar(toolbar);
    // 添加自定义类名，方便后续写样式
    toolbar.container.classList.add('custom-toolbar');
  }
}

步骤2：注册自定义主题 #

定义好类之后，要把它注册到Quill的主题注册表中，这样初始化编辑器时才能识别到：

// 注册名为"custom"的主题，名字可以自己取
Quill.register('themes/custom', CustomTheme);

步骤3：编写对应的CSS样式 #

接下来就可以写自定义主题的样式了，你可以基于现有主题的样式修改，也完全自定义：

/* 自定义编辑器容器样式 */
.ql-custom .ql-container {
  font-family: 'Segoe UI', sans-serif;
  border: 1px solid #eee;
  border-radius: 4px;
}

/* 自定义工具栏样式 */
.ql-custom .custom-toolbar {
  background-color: #f8f9fa;
  border-bottom: 1px solid #eee;
  padding: 8px;
}

/* 覆盖默认格式按钮的 hover 状态 */
.ql-custom .ql-bold:hover {
  color: #007bff;
}

步骤4：初始化编辑器时指定自定义主题 #

最后，初始化Quill的时候，把theme参数设为你注册的主题名称即可：

const quill = new Quill('#editor', {
  theme: 'custom', // 这里填你注册的主题名
  modules: {
    toolbar: ['bold', 'italic', 'underline']
  }
});

3. 替代“直接覆盖Snow样式”的优雅方案 #

如果你之前觉得直接修改Snow主题的全局样式不够优雅，上面的自定义主题方案就完美解决了这个问题——它不会污染默认的Snow主题样式，你的自定义样式只会作用于使用custom主题的编辑器实例，非常适合需要多主题共存的场景。

当然，如果你的需求只是简单微调外观，也可以不用创建新主题类，给编辑器容器加个自定义类名就行：

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: true
  }
});
// 给编辑器容器添加自定义类
quill.container.classList.add('tweaked-snow');

然后基于这个类写样式：

.tweaked-snow .ql-container {
  font-size: 15px;
  border-color: #ddd;
}

但这种方式本质还是样式覆盖，适合简单场景；复杂的主题定制，还是推荐创建独立的主题类。

内容的提问来源于stack exchange，提问作者slashwhatever