如何自定义Visual Studio Code（VSCode）标签页样式？

操作流程 #

• 按下 Ctrl+Shift+P（Mac 系统为 Cmd+Shift+P）调出命令面板
• 搜索并选择 首选项：打开设置(JSON)，进入用户自定义配置文件
• 在配置JSON中添加workbench.colorCustomizations相关字段，保存后立即生效

可配置项参考 #

你可以根据自己的需求调整以下属性的颜色值，支持十六进制颜色、RGB/RGBA格式：

{
  "workbench.colorCustomizations": {
    // 以下配置对所有主题生效，若需仅针对当前主题生效，外层包裹[主题名]即可
    "tab.activeBackground": "#2563eb", // 激活标签页背景色
    "tab.activeForeground": "#ffffff", // 激活标签页文字色
    "tab.inactiveBackground": "#1e293b", // 未激活标签页背景色
    "tab.inactiveForeground": "#94a3b8", // 未激活标签页文字色
    "tab.activeBorderTop": "#fbbf24", // 激活标签页顶部高亮边框
    "tab.hoverBackground": "#334155", // 鼠标悬停标签页时的背景色
    "tab.modifiedBorder": "#ef4444" // 有未保存改动的标签页边框提示色
  }
}

如果只需要对当前使用的默认主题生效，写法如下（以默认Dark+主题为例）：

{
  "workbench.colorCustomizations": {
    "[Default Dark+]": {
      "tab.activeBackground": "#2563eb",
      // 其余自定义配色和上述一致
    }
  }
}

内容的提问来源于stack exchange，提问作者Hardik