workbench.colorCustomizations 是修改 VS Code UI 颜色的唯一有效入口,必须作为 settings.json 顶层字段配置,大小写敏感且仅支持十六进制或 rgba 值;editorBracketMatch.background 属于该配置项,用于高亮括号背景;editor.background 失效常因主题插件、工作区设置或系统暗色模式覆盖;tokenColorCustomizations 与 colorCustomizations 职责分离,前者管语法着色,后者管界面元素。

workbench.colorCustomizations 是改 UI 颜色的唯一入口
想改侧边栏、状态栏、标签页底边线这些界面颜色,workbench.colorCustomizations 是唯一有效路径。装再多“主题插件”也没用——它们只是预设包,真要动某个具体颜色(比如把 statusBar.background 换成深蓝),必须手动写 JSON 覆盖。
常见错误是把 workbench.colorCustomizations 塞进别的配置块里,比如嵌在 "editor.tokenColorCustomizations" 下面,结果整段失效,VS Code 还不报错,只静默忽略。
-
workbench.colorCustomizations必须是settings.json顶层字段,和"editor.fontSize"并列 - 键名大小写敏感:
activityBar.foreground不是activitybar.foreground - 值支持
"#1e1e1e"、"rgba(30, 30, 30, 0.9)",但别用hsl()或darkgray,跨平台渲染不稳定 - 工作区级
.vscode/settings.json会完全覆盖用户级设置,调颜色前先确认没被它屏蔽
editorBracketMatch.background 怎么单独调高亮括号色
括号匹配背景不是语法色,而是 UI 元素,所以归 workbench.colorCustomizations 管,不是 editor.tokenColorCustomizations。很多人搜 “bracket highlight color” 结果配错地方,最后发现怎么都改不动。
正确 key 是 editorBracketMatch.background,不是 bracketMatchBackground 或 editor.bracketMatchBackground——官方文档里就这一个标准写法。
- 它只控制括号对齐时的浅色背景,不影响光标或边框颜色
- 如果用了 Nord、GitHub Dark 等主题,它们可能自带
editor.tokenColorCustomizations,会间接影响括号区域渲染逻辑,建议先临时禁用主题插件验证 - 值设为
"#ff000033"(半透红)比纯色更柔和,但注意:透明度在部分显卡驱动下可能渲染异常
editor.background 改了却没变?先查这三处
editor.background 是唯一控制代码编辑区底色的配置项,但它最容易“看似生效实则被盖”。不是你写错了,大概率是优先级或作用域问题。
- 检查是否启用了带
tokenColorCustomizations的主题插件(如 One Dark Pro),它可能强制重写整个编辑器渲染层,连带吞掉你的editor.background - 确认没在项目根目录的
.vscode/settings.json里写了同名字段——工作区设置永远赢过用户设置 - 系统暗色模式开关会影响某些主题(如 GitHub Theme),即使你写了
"#1e1e1e",系统没开暗色,主题就回退到亮色变体,背景还是白的
tokenColorCustomizations 和 colorCustomizations 别混用
这是最常踩的坑:想改注释颜色,却往 workbench.colorCustomizations 里塞 "comments": "#647f4c",结果毫无反应。因为注释属于语法 token,得走 editor.tokenColorCustomizations。
两者分工明确:workbench.colorCustomizations 管按钮、标签、状态栏;editor.tokenColorCustomizations 管 function、"string"、// comment 这些文本内容的颜色。
- 查语法 token 名不能靠猜:按
Ctrl+Shift+P→Developer: Inspect Editor Tokens and Scopes,点一下代码就能看到实时 token 类型和对应 key - 查 UI 元素 class 名:按
Ctrl+Shift+I打开开发者工具,右键界面元素 →Inspect,看 class 后对照官方 color reference 文档 - 配对修改很重要:只调
editor.background不调editor.foreground,深背景上可能直接看不见文字;只调字符串色不调注释色,灰背景+灰注释就彻底糊成一片


















