Vscode 主题色自定义(当前为默认颜色)
·
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",
}
使用说明
- 替换方式:打开 VS Code 的
settings.json(快捷键Ctrl+,后点击右上角{}图标),替换为上面的代码即可; - 实时生效:保存文件(
Ctrl+S)后,所有颜色配置会立即生效,无需重启 VS Code; - 自定义调整:如果想修改某部分颜色,只需修改对应配置项后的 16 进制色值(比如把
editor.background改成#121212会更黑),注释会帮你确认修改的是哪个区域。
备注:使用 kiro编译器 时不习惯样式,调试后随手记的(适用VS Code 壳子相关编译器,cursor、trae、windsurf、kiro),若不懂如何配置,可在评论区询问或找AI。
更多推荐
所有评论(0)