VSCode离线文档怎么设置深色模式-VSCode-PHP中文网

vscode离线html文档不受主题控制，因其由chromium独立渲染，不继承workbench.colortheme或editor.tokencolorscheme；需手动注入css或修改源码启用深色样式。

vscode离线文档怎么设置深色模式

VSCode 离线文档（比如通过 vscode-docs 扩展或本地打开的 HTML 文档）默认不继承编辑器深色主题，必须手动干预 CSS 或启用特定配置，否则永远是白底黑字。

离线 HTML 文档为什么不受 VSCode 主题控制

VSCode 的 workbench.colorTheme 和 editor.tokenColorScheme 只影响编辑器 UI 和代码区，对用内置浏览器引擎渲染的离线 HTML 文档（如官方 API 文档、docs/index.html）完全无效。这类页面走的是 Chromium 渲染管线，样式由自身 HTML/CSS 决定，VSCode 不注入任何主题适配逻辑。

常见现象：边栏和编辑器是 Dark+，但打开本地 docs/api.html 后页面全白、文字发亮、链接刺眼
根本原因：没有 prefers-color-scheme: dark 媒体查询支持，也未内联深色 CSS
插件如 ms-vscode.vscode-markdown-preview 有 useEditorStyle 开关，但纯 HTML 预览无此机制

强制 HTML 离线文档走深色的两种实操方式

没有通用开关，只有两类可落地的方案：改文档源码（推荐用于自己维护的文档），或用浏览器级 CSS 注入（适用于任意 HTML 文件）。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

如果你能修改文档源码，在里加这段 CSS：

body { background: #0d0d0d !important; color: #e6e6e6 !important; }
code, pre { background: #1e1e1e !important; color: #d4d4d4 !important; }
a { color: #4fc1ff !important; }
@media (prefers-color-scheme: dark) { body { background: #0d0d0d; } }

注意：必须加 !important，否则文档原有样式会覆盖

若无法改源码（如官方 SDK 文档），用 VSCode 插件 brunnerh.insert-snippet 或自定义用户片段，在每次打开 HTML 时手动注入上述 CSS；更稳的方式是配合本地 HTTP Server（如 live-server），用中间件自动注入 <style></style> 标签

为什么 `markdown.preview.experimental.useEditorStyle` 对 HTML 无效

这个设置只作用于 VSCode 自己生成的 Markdown 预览页（preview.html），它会把编辑器当前语法主题的颜色变量映射为 CSS 变量并注入。而离线 HTML 文档是独立文件，VSCode 不解析其 DOM 结构，也不挂载任何样式上下文。

错误尝试：在 settings.json 里加 "markdown.preview.experimental.useEditorStyle": true —— 它对 file:///path/to/doc.html 完全没反应
验证方法：右键离线 HTML → “Open in Default Browser”，如果浏览器里也是白底，就确认是文档自身问题，不是 VSCode 渲染缺陷
真正起效的替代项：用插件 shd101wyy.markdown-preview-enhanced 的 HTML 导出功能，它生成的 HTML 会带内联深色样式，但仅限它导出的内容