VSCode深色模式需同步配置6项:workbench.colorTheme、editor.tokenColorScheme、terminal.integrated.theme、markdown.preview.experimental.useEditorStyle、调试控制台主题、PDF预览CSS;仅改UI主题无法使代码区变暗。

VSCode 默认就是深色模式,但“看起来是深色”不等于“真正启用了深色颜色方案”——很多人点了 Dark+ 主题,结果代码区还是白的、终端发灰、PDF 预览刺眼,问题出在颜色方案被拆成了多个独立控制项,只动一个根本没用。
怎么确认 workbench.colorTheme 和 editor.tokenColorScheme 是否匹配
UI 变暗 ≠ 代码变暗。VSCode 把界面和代码配色完全分开:workbench.colorTheme 控制侧边栏、标题栏等 UI 元素;editor.tokenColorScheme 才管代码区的背景、字符串、关键字颜色。
- 按
Ctrl+K Ctrl+T(Win/Linux)或Cmd+K Cmd+T(macOS)打开主题面板,选中Dark+ (default dark)或GitHub Dark Default—— 这只改workbench.colorTheme - 再按
Ctrl+,打开设置,搜索tokenColorScheme,右侧值必须是Default Dark+(不是Default Light+,也不是空) - 如果两者不一致(比如 UI 是 Dark+,但 token 是 Light+),就会出现“边栏黑、代码白”的割裂效果
- 第三方主题(如 One Dark Pro)通常会自动绑定 token 方案,但如果你手动改过
editor.tokenColorScheme,它可能被覆盖,删掉这行让主题接管更稳
为什么终端/Markdown 预览/调试控制台还是浅色
这些区域不继承 workbench.colorTheme,各自有独立配置,漏掉任何一个都会破坏深色一致性。
- 终端:默认用系统 shell 配色,不是编辑器主题。加这一行到
settings.json:"terminal.integrated.theme": "dark";更细粒度可设"terminal.integrated.background": "#0d0d0d" - Markdown 预览:默认走浏览器样式,跟编辑器脱节。启用
"markdown.preview.experimental.useEditorStyle": true才能复用编辑器语法色和背景 - 调试控制台:它用的是
editor.tokenColorScheme的子集,但某些主题(如 Material Theme)会禁用其深色渲染。换回Default Dark+最可靠 - PDF 预览(如 LaTeX Workshop):插件自带样式,不受主题控制。需手动改插件目录下的
viewer.css,在#viewerContainer里加filter: invert(88%);
想统一纯黑背景要改哪 6 个关键区域
Dark+ 默认背景是 #1E1E1E(深灰),不是纯黑。OLED 屏或夜间弱光下想彻底灭光,必须手动覆盖全部 UI 区域,缺一不可。
- 所有修改必须写进
settings.json的workbench.colorCustomizations对象里,格式严格:"workbench.colorCustomizations": { "editor.background": "#000000", ... } - 必须同时覆盖这 6 项:
"editor.background"、"sideBar.background"、"activityBar.background"、"statusBar.background"、"panel.background"、"titleBar.activeBackground" - 别只改
editor.background—— 否则会出现“代码黑、侧边栏灰、标题栏突兀亮”的视觉断裂 - 纯黑下高亮色容易眩光,建议同步关掉
Bracket Pair Colorizer类高饱和插件,或把字符串色从#ffffff改成#bbbbbb
最常被忽略的是 window.autoDetectColorScheme 和 PDF 预览:前者在 Windows 上基本无效,却常被误开导致主题被系统覆盖;后者哪怕其他区域全黑,预览页仍白得晃眼——这两个点不单独处理,深色方案就永远不完整。


















