本文详解如何通过 css 统一 simplemde 编辑器与预览模式的背景色，解决默认预览页白底破坏暗色主题一致性的问题，并提供可直接复用的样式代码及关键注意事项。
本文详解如何通过 css 统一 simplemde 编辑器与预览模式的背景色，解决默认预览页白底破坏暗色主题一致性的问题，并提供可直接复用的样式代码及关键注意事项。
SimpleMDE（现维护分支为 EasyMDE）是一款轻量、易集成的 Markdown 编辑器，常用于需要实时编辑+预览的场景。当为编辑器应用深色主题（如 background-color: rgb(0, 17, 28)）后，点击「Preview」按钮切换至预览模式时，内容会渲染在纯白背景上，导致视觉割裂——这并非 bug，而是因为预览区域（.editor-preview）拥有独立的 DOM 结构和默认样式，未继承编辑器容器的背景设置。
要实现预览背景与编辑区完全一致，需显式覆盖预览容器的 CSS 样式。核心目标元素有两个：
- .editor-preview：内联预览面板（位于编辑器下方）
- .editor-preview-side：侧边预览面板（启用 sideBySide 模式时生效）
以下是一段经过验证、生产可用的 CSS 规则，适配深色主题并兼顾可读性：
.editor-preview,
.editor-preview-side {
background-color: rgb(0, 17, 28) !important;
color: #fff !important;
font-family: inherit;
font-size: 16px;
line-height: 1.5;
padding: 0 15px 15px;
box-sizing: border-box;
overflow: auto;
}✅ 关键说明：
- !important 是必要的——SimpleMDE 内部部分样式具有较高优先级，不加可能导致覆盖失败；
- color: #fff !important 确保文字在深色背景下清晰可见（避免依赖 Markdown 渲染后的 <p> 默认色）；
- font-family: inherit 保证字体与编辑区一致，避免预览中字体突变；
- 若使用 sideBySide: true，务必同时声明 .editor-preview-side，否则侧边预览仍为白色。
⚠️ 注意事项：
- 不要仅修改 .CodeMirror（编辑器主体），它对预览区域完全无效；
- 避免使用过于宽泛的选择器（如 body .editor-preview），可能引发样式冲突；
- 如项目已引入第三方主题（如 simplemde-theme-bootstrap-dark），建议优先查阅其文档或直接复用其预览样式逻辑，而非重复造轮子；
- 在 EasyMDE（SimpleMDE 的活跃分支）中，类名保持兼容，上述 CSS 同样适用。
最后，推荐将该样式块置于全局 CSS 文件末尾，或通过 <style> 标签内联于页面底部，确保加载顺序高于 SimpleMDE 自带样式表，从而稳定生效。完成配置后，编辑与预览将真正实现视觉一体化，大幅提升用户沉浸感与专业度。
