# 主题
<!--
Themes allow you to easily make your editor look good with minimal effort. Quill features two offically supported themes: [Snow](#snow) and [Bubble](#bubble).
-->
通过主题设置,你可以容易的设置编辑器,花费最小的努力让编辑器好看。Quill官方提供两个有特色的主题:[Snow](#snow) and [Bubble](#bubble)。
## Usage
```html
<!-- Add the theme's stylesheet -->
<link rel="stylesheet" href="{{site.cdn}}1.3.6/quill.bubble.css">
<script src="{{site.cdn}}1.3.6/quill.js"></script>
<script>
var quill = new Quill('#editor', {
theme: 'bubble' // Specify theme in configuration
});
</script>
```
## Bubble
<!--
Bubble is a simple tooltip based theme.
-->
Bubble是一个简单的基于提示起泡样式的主题。
![](https://img.kancloud.cn/18/e5/18e5c3ca6ff166798e1ea0674d0737bb_778x305.png)
<iframe height="265" style="width: 100%;" scrolling="no" title="Quill-full-bubble" src="https://codepen.io/liuwave/embed/JjoPyqY?height=265&theme-id=light&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/liuwave/pen/JjoPyqY'>Quill-full-bubble</a> by 葡萄架
(<a href='https://codepen.io/liuwave'>@liuwave</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
## Snow
<!--
Snow is a clean, flat toolbar theme.
-->
Snow是一个简洁扁平化的工具栏主题。
<iframe height="265" style="width: 100%;" scrolling="no" title="Quill-full-snow" src="https://codepen.io/liuwave/embed/wvBwrJY?height=265&theme-id=light&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/liuwave/pen/wvBwrJY'>Quill-full-snow</a> by 葡萄架
(<a href='https://codepen.io/liuwave'>@liuwave</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
## 自定义
<!--
Themes primarily control the visual look of Quill through its CSS stylesheet, and many changes can easily be made by overriding these rules. This is easiest to do, as with any other web application, by simply using your browser developer console to inspect the elements to view the rules affecting them.
-->
主题主要通过它的CSS样式表控制Quill的外观,通过重写这些样式可以容易改变quill的外观。像其它web应用一样,我们可以很容易的通过使用浏览器开发者控制台来检查作用在元素上的规则。
<!--
Many other customizations can be done through the respective modules. For example, the toolbar is perhaps the most visible user interface, but much of the customization is done through the [Toolbar module](/docs/modules/toolbar/).
-->
可以通过对于的模块来进行很多定制。比如,最明显的用户界面工具栏就是主要是通过[工具栏模块](modules/工具栏toolbar.md)来定制的。
- 前言
- 快速开始(quick_start)
- 下载(download)
- 配置(configuration)
- 格式(formats)
- API
- 内容(contents)
- 格式化(formatting)
- 选区(selection)
- 编辑器(editor)
- 事件(events)
- 模型(model)
- 扩展(extension)
- 增量(Delta)
- 模块(modules)
- 工具栏(toolbar)
- 键盘(keyboard)
- 历史记录(history)
- 粘贴板(clipboard)
- 语法高亮(syntax)
- 主题(themes)
- 更多教程
- 为什么选择Quill?
- 如何定制Quill?
- 设计Delta格式(未翻译)
- 构建一个自定义模块
- 将Quill加入你的编译管线(未翻译)
- Cloning Medium with Parchment
- 和其它富文本编辑器的对比(未翻译)
- Designing the Delta Format
- 扩展模块
- vue-quill-editor
- quill-image-extend-module
- quill-image-resize-module
- quill-image-drop-module
- quill-better-table
- quilljs-table
- 更多模块