sideBar.background 必须嵌套在 workbench.colorCustomizations 中才生效,直接写在 settings.json 根层级无效;需同步配置 sideBar.foreground、sideBar.border 等配套项,并优先使用项目级 .vscode/settings.json 实现多项目差异化配色。

sideBar.background 必须嵌套在 workbench.colorCustomizations 里才生效
直接在 settings.json 根层级写 "sideBar.background": "#f0f0f0" 完全无效——VSCode 只认它作为 workbench.colorCustomizations 对象的子属性。这是最常被跳过的前提,也是 90% 配置不生效的根源。
正确做法是:
- 按
Ctrl+Shift+P(Windows/Linux)或Cmd+Shift+P(macOS),执行Preferences: Open Settings (JSON) - 确保
"workbench.colorCustomizations"是一个对象(不是null、字符串或数组) - 把颜色配置放在它内部,例如:
"workbench.colorCustomizations": { "sideBar.background": "#ffffff", "sideBar.foreground": "#333333", "sideBar.border": "#e0e0e0" }
只改 background 很容易让文字/图标看不清
侧边栏不是单色块,sideBar.background 只控制底色;没配好配套项,轻则文字发灰、图标模糊,重则整个侧边栏视觉割裂。
必须同步检查这几项:
-
sideBar.foreground:控制文件名、图标、折叠箭头的颜色。浅背景(如#ffffff)配深色(#333333),深背景(如#1e1e1e)配浅色(#e0e0e0) -
sideBar.border:右侧那条细线,默认常为空白,设成比背景略深/浅的色(如#dddddd或#2a2a2a)能立刻强化边界感 -
sideBar.dropBackground:拖拽文件到侧边栏时的高亮底色,不设就用默认半透明灰,操作反馈弱
想按项目换颜色?必须用 .vscode/settings.json
全局 settings.json 会让所有 VSCode 窗口统一变色。要实现「A 项目蓝灰侧边栏、B 项目暖黄侧边栏」,唯一可靠方式是把 workbench.colorCustomizations 写进项目根目录下的 .vscode/settings.json。
注意几个实操细节:
- VSCode 右下角必须显示「工作区」字样,否则你编辑的仍是用户级设置
- 手动创建
.vscode文件夹和settings.json(若不存在) - Git 提交时,默认会把
.vscode/settings.json一起提交;如不想共享,加一行.vscode/settings.json到项目.gitignore - 第三方主题(如 One Dark Pro)可能禁用部分自定义项,可先切回
Default Light+或Default Dark+测试是否生效
用了 Peacock 插件?别让它和你的配置打架
Peacock 默认只改 activityBar.background 和状态栏,**不碰 sideBar.background**,所以它和你的侧边栏配色基本无关。但它会设置 sideBar.topBackground(顶部横条),如果你也手动设了这个值,两者可能冲突。
更隐蔽的问题是:Peacock 的「Enter a Color」命令不会修改 sideBar.foreground 或 sideBar.border,这些仍得靠你手写进 workbench.colorCustomizations。漏掉它们,哪怕背景色再漂亮,侧边栏也会显得“浮”在界面上,缺乏厚度和层次。


















