setting.json 配置

 {
   //...... 其他配置
  
   // 工作台整体颜色自定义(统一管理所有界面元素的颜色)
  "workbench.colorCustomizations": {
    // ========== 状态栏配置 ==========
    "statusBar.background": "#3C3C3C", // 有文件夹打开时状态栏背景色(深灰色)
    "statusBar.noFolderBackground": "#3C3C3C", // 无文件夹打开时状态栏背景色(深灰色)
    "statusBar.debuggingBackground": "#3C3C3C", // 调试模式下状态栏背景色(深灰色)
    "statusBar.foreground": "#FFFFFF", // 状态栏文字颜色(纯白色)

    // ========== 编辑器核心区域配置 ==========
    "editor.background": "#1E1E1E", // 编辑器整体背景色(VS Code默认深灰)
    "editor.foreground": "#D4D4D4", // 编辑器默认文字颜色(浅灰色)
    "editor.selectionBackground": "#264F78", // 选中代码区域的背景色(深蓝色)
    "editor.selectionHighlightBackground": "#264F7880", // 多行/列选择时的背景色(半透明深蓝)
    "editor.lineHighlightBackground": "#2A2A2A", // 光标所在行的背景色(比编辑器背景稍亮的灰色)
    "editor.lineHighlightBorder": "#3C3C3C", // 光标所在行的边框色(深灰色)
    "editorLineNumber.foreground": "#858585", // 编辑器左侧行号的文字颜色(中灰色)
    "editorCursor.foreground": "#FFFFFF", // 编辑光标颜色(纯白色)
    "editor.findMatchBackground": "#515C00", // 搜索匹配结果的背景色(暗黄绿色)
    "editorError.foreground": "#F44747", // 代码错误提示下划线颜色(红色)
    "editorWarning.foreground": "#CCA700", // 代码警告提示下划线颜色(金黄色)

    // ========== 侧边栏(资源管理器)配置 ==========
    "sideBar.background": "#252526", // 侧边栏整体背景色(比编辑器稍亮的灰色)
    "sideBar.foreground": "#CCCCCC", // 侧边栏默认文字颜色(浅灰色)
    "sideBarSectionHeader.background": "#333333", // 侧边栏分组标题(如"资源管理器")背景色(深灰色)
    "list.activeSelectionBackground": "#094771", // 侧边栏选中文件/文件夹的背景色(深蓝色)
    "list.hoverBackground": "#37373D", // 鼠标悬浮在侧边栏项上的背景色(浅深灰)

    // ========== 终端配置 ==========
    "terminal.background": "#1E1E1E", // 内置终端背景色(和编辑器背景一致)
    "terminal.foreground": "#CCCCCC", // 终端文字颜色(浅灰色)
    "terminal.selectionBackground": "#4E4E4E", // 终端中选中文字的背景色(中灰色)
    "terminalCursor.foreground": "#FFFFFF", // 终端光标颜色(纯白色)

    // ========== 顶部标签栏配置 ==========
    "tab.activeBackground": "#1E1E1E", // 活跃标签页(当前打开文件)背景色(和编辑器一致)
    "tab.inactiveBackground": "#252526", // 非活跃标签页背景色(和侧边栏一致)
    "tab.activeForeground": "#FFFFFF", // 活跃标签页文字颜色(纯白色)
    "tab.inactiveForeground": "#CCCCCC", // 非活跃标签页文字颜色(浅灰色)
    "tab.border": "#3C3C3C", // 标签页之间的分隔边框色(深灰色)

    // ========== 标题栏配置 ==========
    "titleBar.background": "#252526", // 标题栏背景色(和侧边栏一致)
    "titleBar.foreground": "#FFFFFF", // 标题栏文字颜色(纯白色)
    "titleBar.activeBackground": "#252526", // 活动窗口标题栏背景色(和标题栏一致)
    "titleBar.inactiveBackground": "#1E1E1E", // 非活动窗口标题栏背景色(和编辑器一致)

    // ========== 辅助区域配置 ==========
    "scrollbarSlider.background": "#46464680", // 编辑器滚动条滑块默认颜色(半透明中灰色)
    "scrollbarSlider.hoverBackground": "#56565680", // 鼠标悬浮在滚动条滑块上的颜色(半透明浅灰色)
    "editorHoverWidget.background": "#282828", // 代码悬浮提示框(如函数说明)背景色(深灰色)
    "editorSuggestWidget.background": "#282828", // 代码自动补全弹窗背景色(深灰色)
  },
  // 代码语法高亮自定义(仅对Visual Studio Dark主题生效)
  "editor.tokenColorCustomizations": {
    "[Visual Studio Dark]": {
      "comments": "#6A9955", // 注释文字颜色(绿色)
      "strings": "#CE9178", // 字符串(如"abc"、'123')颜色(浅橙色)
      "keywords": "#569CD6", // 编程语言关键字(如if/else/function/class)颜色(浅蓝色)
      "numbers": "#B5CEA8", // 数字(如123、3.14、0xFF)颜色(浅绿色)
      "types": "#4EC9B0", // 类型(如string/number/boolean)颜色(青绿色)
      "functions": "#DCDCAA", // 函数名颜色(浅黄色)
      "variables": "#9CDCFE", // 变量名颜色(亮蓝色)
    },
  },
  // 全局颜色主题(必须设为Visual Studio Dark,否则上述语法高亮自定义不生效)
  "workbench.colorTheme": "Visual Studio Dark",
}

使用说明

  1. 替换方式:打开 VS Code 的settings.json(快捷键Ctrl+,后点击右上角{}图标),替换为上面的代码即可;
  2. 实时生效:保存文件(Ctrl+S)后,所有颜色配置会立即生效,无需重启 VS Code;
  3. 自定义调整:如果想修改某部分颜色,只需修改对应配置项后的 16 进制色值(比如把editor.background改成#121212会更黑),注释会帮你确认修改的是哪个区域。

备注:使用 kiro编译器 时不习惯样式,调试后随手记的(适用VS Code 壳子相关编译器,cursor、trae、windsurf、kiro),若不懂如何配置,可在评论区询问或找AI。

更多推荐