You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

VS Code如何修改包含资源管理器、搜索等功能的侧边活动栏颜色

你要修改的区域在VS Code主题色体系中分为两部分:最左侧存放图标入口的活动栏(Activity Bar)、点击图标后展开的存放资源管理器/搜索/扩展等内容的侧边栏(Side Bar),所有对应配置都添加在workbench.colorCustomizations节点下即可,你可以根据需求自行调整色值:

// 以下配置加到你本地settings.json的workbench.colorCustomizations节点中,原有配置保留即可
{
    // ========== 活动栏(最左侧图标栏)配置 ==========
    "activityBar.background": "#131a29", // 活动栏背景,你已有配置可直接修改
    "activityBar.foreground": "#ffffff", // 活动栏图标默认颜色
    "activityBar.activeBorder": "#A4BD00", // 选中图标下方的高亮边框颜色
    "activityBar.activeBackground": "#1a2438", // 选中图标的背景色
    "activityBar.inactiveForeground": "#888888", // 未选中图标的颜色
    "activityBarBadge.background": "#A4BD00", // 活动栏通知角标背景
    "activityBarBadge.foreground": "#000000", // 活动栏通知角标文字颜色

    // ========== 侧边栏(展开后展示内容的区域)配置 ==========
    "sideBar.background": "#0f141f", // 侧边栏整体背景色
    "sideBar.foreground": "#cccccc", // 侧边栏默认文字颜色
    "sideBar.border": "#A4BD00", // 侧边栏与编辑区之间的边框颜色
    "sideBarTitle.foreground": "#ffffff", // 侧边栏顶部标题(如“资源管理器”)文字颜色
    "sideBarSectionHeader.background": "#131a29", // 侧边栏内分组标题背景色
    "sideBarSectionHeader.foreground": "#ffffff", // 侧边栏内分组标题文字颜色

    // ========== 侧边栏内单个项目的颜色配置 ==========
    "tree.indentGuidesStroke": "#333333", // 目录树缩进引导线颜色
    "tree.inactiveIndentGuidesStroke": "#262626", // 未选中目录的缩进引导线颜色
    "treeItem.hoverBackground": "#1a2438", // 鼠标悬浮在项目上的背景色
    "treeItem.selectedBackground": "#A4BD0033", // 选中项目的背景色
    "treeItem.selectedForeground": "#ffffff", // 选中项目的文字颜色
    "treeItem.inactiveSelectedBackground": "#1a2438", // 侧边栏失焦时选中项目的背景色
    "list.focusOutline": "#A4BD00" // 选中项目的外边框颜色
}

如果需要全局生效,将上述配置加到全局settings.json的workbench.colorCustomizations节点中即可。

内容的提问来源于stack exchange,提问作者Jannis

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.08 10:09:03