workbench.colorCustomizations 是修改 VS Code UI 颜色的唯一有效入口,必须作为 settings.json 顶层字段配置,键名大小写敏感(如 sideBar.background),值仅支持十六进制、rgba 或 transparent;editor.tokenColorCustomizations 则专用于语法高亮,二者职责分离、不可混用。

直接改 settings.json 里的 workbench.colorCustomizations 和 editor.tokenColorCustomizations,其他方式基本无效。
怎么改侧边栏、状态栏这些 UI 元素颜色
UI 元素(如侧边栏、状态栏、活动栏)的颜色只能通过 workbench.colorCustomizations 控制,它不碰代码内容本身。
-
workbench.colorCustomizations必须是settings.json的顶层字段,不能嵌套在"workbench"或"editor"对象里 - 键名大小写敏感:
sideBar.background有效,sidebar.background完全失效;空格、拼写错误会让整条配置静默忽略 - 值只接受合法 CSS 颜色字符串:
"#2d2d2d"、"rgba(45, 45, 45, 0.9)"、"transparent"可用;"red"、"hsl(...)"、CSS 变量(如var(--vscode-editor-background))全部不生效 - 常见实用 key:
editor.background(仅编辑区底色)、sideBar.background、statusBar.background、activityBar.background、tab.activeBackground、editorCursor.foreground、editor.lineHighlightBackground
为什么改了 editor.background 却没变
不是配置错了,而是被更高优先级的机制覆盖了。
- 当前启用的颜色主题(
workbench.colorTheme)如果自带editor.tokenColorCustomizations,可能间接干扰背景渲染逻辑——比如 Nord 主题默认强制接管语法色,连带影响背景显示 - 工作区级
.vscode/settings.json里写了同名配置,会完全屏蔽用户级设置;建议先删掉工作区里的workbench.colorCustomizations测试 - 某些主题(如 GitHub Theme)依赖系统暗色模式开关:系统没开暗色,它就回退到亮色变体,
editor.background值再对也白搭 -
editor.background只控制编辑器内容区(敲代码那块),和终端背景(terminal.integrated.background)、面板背景(panel.background)完全无关
怎么精准改关键字、字符串这些代码颜色
代码文本颜色必须走 editor.tokenColorCustomizations + textMateRules,靠猜 scope 名或瞎改 foreground 会失效。
- scope 名不能靠经验写:
"string"太宽泛,TypeScript 字符串实际是string.quoted.double.ts,Python 是string.quoted.single.python;必须用命令面板运行Developer: Inspect Editor Tokens and Scopes点击真实代码获取 - 多个
textMateRules匹配同一 token 时,后定义的规则覆盖前一个;想调序得手动挪数组位置 - 第三方主题(如 One Dark Pro)可能在
package.json里声明"_defaults": true,直接无视你的editor.tokenColorCustomizations;建议先换回官方Dark+ (default dark)验证是否生效 - 语义高亮(
editor.semanticTokenColorCustomizations)优先级高于 TextMate 规则,如果你开了语义高亮(默认开启),改tokenColorCustomizations可能完全不生效
怎么确认某个 UI 元素对应哪个 color token
别查文档、别猜、别搜“VSCode 状态栏颜色名”,唯一可靠路径是开发者工具 + 官方映射。
- 按
Ctrl+Shift+I(Windows/Linux)或Cmd+Option+I(macOS)打开开发者工具 - 右键点击目标区域(比如状态栏右侧的 Git 分支名)→
Inspect - 看 DOM class 名(如
status-bar-item、monaco-workbench),再对照 VSCode 官方theme color reference文档映射到标准 key(例如statusBar.foreground) - DOM class 和 color token 不是一一对应的,
status-bar-item→statusBar.foreground这类映射需查文档确认,不能凭 class 名直接推断
最常被忽略的是:UI 色和语法色必须分两个独立对象写,混在一起(比如把 editorBracketMatch.background 塞进 editor.tokenColorCustomizations)会直接导致整段配置失效。











