本文详解如何通过 css 覆盖 simplemde 的预览（preview）区域默认白色背景，使其与已设置的深色编辑器背景（如 rgb(0, 17, 28)）保持一致，确保视觉统一性。
本文详解如何通过 css 覆盖 simplemde 的预览（preview）区域默认白色背景，使其与已设置的深色编辑器背景（如 rgb(0, 17, 28)）保持一致，确保视觉统一性。
SimpleMDE 默认将编辑区（基于 CodeMirror）与预览区（HTML 渲染结果）分离渲染，二者使用 完全独立的 CSS 类名和样式作用域。因此，即使你已成功为 .CodeMirror 设置深色背景（如下所示），预览模式仍会回退到默认白色背景：
.CodeMirror {min-height: 200px; width: 100%; color: white; background-color: rgb(0, 17, 28); padding: 15px 25px; }要同步预览区域的视觉风格，需针对性地覆盖其容器样式。SimpleMDE 使用两个关键类控制预览视图：
- .editor-preview：用于「分屏预览」（Preview tab 或 split view 下的右侧预览面板）；
- .editor-preview-side：部分版本或主题中用于侧边预览布局（兼容性建议一并设置）。
✅ 正确的覆盖方案如下（请将此 CSS 插入你的样式表，确保优先级高于 SimpleMDE 自带样式，例如置于 <style> 标签末尾或使用 !important 仅在必要时）：
.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 内部可能内联或高权重样式覆盖；若项目采用 CSS-in-JS 或模块化方案，请确保该规则生效于全局作用域。
- 预览区文本颜色（color）必须同步调整为浅色（如 #fff），否则深色背景 + 深色文字将导致内容不可读。
- 若启用「实时预览」（autofocus: true 或 previewRender 配置），该样式同样生效，无需额外处理。
- 如需进一步定制 Markdown 渲染后的 HTML 元素（如 <h1>、<pre>、代码块等），应额外编写针对 .editor-preview 下文的嵌套样式，例如：
.editor-preview pre, .editor-preview code {background-color: rgba(0, 30, 50, 0.7); color: #e0e0e0; }
? 进阶建议：若长期使用深色主题，可直接集成社区维护的 SimpleMDE-DarkTheme 分支，它已系统性重写全部 UI 组件样式，包括预览、工具栏、状态栏等，避免零散样式覆盖带来的维护成本。
最终效果：点击「Preview」按钮后，预览区域将无缝继承编辑器的深色背景与配色体系，实现专业、一致的暗色 Markdown 编辑体验。
