分享我自用的一个vscode配色方案-参考jetbrains的idea的darcular

之前一直用的是Intellij的IDEA开发的，最近因为使用AI工具，需要使用VSCode的编辑器（其实是基础VSCode的Windsurf），刚用的时候，比较不适应，比如快捷键等操作，还有一点很直观的就是看惯了IDEA，VSCode的配色实在适应不了，花了点时间改成了IDEA一样的，效果图如图：

有需要的朋友可以拿去或者参考，主要是修改settings.json配置文件，配置文件内容如下(找颜色的内容复制过去即可)：

{
    "editor.minimap.enabled": false,
    "redhat.telemetry.enabled": true,
    "outline.problems.enabled": false,
    "outline.problems.colors": false,
    "outline.problems.badges": false,
    "problems.autoReveal": false,
    "problems.decorations.enabled": false,
    "editor.fontFamily": "'Fira Code', Menlo, Monaco, 'Courier New', monospace",
    "editor.fontSize": 13,
    "git.autofetch": true,
    "extensions.ignoreRecommendations": true,
    "search.exclude": {
        "**/node_modules": true,
        "**/dist": true,
        "**/out": true,
        "**/target": true,
    },
    "editor.fontLigatures": true,
    "workbench.iconTheme": "vscode-jetbrains-icon-theme-2023-dark",
    // 自定义的颜色
    "editor.tokenColorCustomizations": {
        "comments": "#808080", // 注释
        "keywords": "#93C763", // 关键字
        "variables": "#33BA9B", // 变量名 
        "strings": "#EC7600", // 字符串
        "functions": "#678CB1", // 内置函数名
        "numbers": "#FFCD22", // 数字
        "types": "#678CB1", //类定义颜色
    },
    "workbench.colorCustomizations": {
        "editor.background": "#282828", // 修改编辑器背景颜色
        "editor.selectionBackground": "#804000", // 选中区域
        "editor.lineHighlightBackground": "#2F393C", // 当前行高亮
        "editorCursor.foreground": "#BBBBBB", // 光标
        "sideBar.background": "#3C3F41",  // 侧边栏背景色
        "activityBar.background": "#3C3F41", // 修改活动栏图标颜色
        "sideBarSectionHeader.background": "#3C3F41", 
        "statusBar.background": "#3C3F41",//状态栏背景颜色
        "statusBar.noFolderBackground": "#666666",// 状态栏背景颜色（无活动文件时）
        "titleBar.activeBackground": "#3C3F41",// 标题栏背景颜色
        "titleBar.inactiveBackground": "#3C3F41",// 标题栏背景颜色（无活动文件时）
        "titleBar.activeForeground": "#FFFFFF",// 标题栏前景颜色
        "tab.activeForeground": "#ffffff",// 标签栏前景颜色
        "tab.inactiveForeground": "#808080",// 标签栏前景颜色（无活动文件时）
        "tab.unfocusedActiveForeground": "#808080",// 标签栏前景颜色（无活动文件时）
        "tab.unfocusedInactiveForeground": "#808080",// 标签栏前景颜色（无活动文件时）
        "tab.activeBackground": "#4E5254",// 标签栏背景颜色
        "tab.inactiveBackground": "#3C3F41",// 标签栏背景颜色（无活动文件时）
        "tab.unfocusedActiveBackground": "#3C3F41",// 标签栏背景颜色（无活动文件时）
        "tab.unfocusedInactiveBackground": "#3C3F41",// 标签栏背景颜色（无活动文件时）
        "tab.border": "#3C3F41",// 标签栏边框颜色
        "editorGroupHeader.tabsBackground": "#3C3F41", // Tabs 栏整体的背景颜色（包括空白区域）
        "titleBar.border": "#323232",// 标题栏边框颜色
        "editorStickyScroll.border": "#313436",// 粘性滚动边框颜色
        "editorStickyScroll.shadow": "#00000000",// 粘性滚动阴影颜色，直接改成透明了
        "sideBarStickyScroll.border": "#2B2B2B",// 侧边栏滚动条颜色
        "sideBarStickyScroll.shadow": "#00000000",// 侧边栏滚动条阴影颜色，直接改成透明了
        "scrollbar.shadow": "#202121",// 滚动条阴影颜色
        "panel.background":"#282828", // 面板背景颜色
    }
}

附几种打开 settings.json 的方法，从最简单到较复杂：

方法1（最简单）：

按下键盘快捷键 Ctrl + ,（Windows/Linux）或 Cmd + ,（Mac）打开设置
在设置界面右上角找到一个"打开设置(json)"的图标，看起来像是一个文档带箭头的图标，点击它

方法2（通过命令面板）：

按下 Ctrl + Shift + P（Windows/Linux）或 Cmd + Shift + P（Mac）打开命令面板
输入 "settings json"
选择 "首选项：打开设置(json)"（英文是 "Preferences: Open Settings (JSON)"）

方法3（通过菜单）：

点击左上角的"文件"菜单（Windows/Linux）或"Code"菜单（Mac）
选择"首选项"（Preferences）
选择"设置"（Settings）
在打开的设置界面右上角，点击"打开设置(json)"图标

如果你打开后发现 settings.json 是空的或只有 {}，这是正常的。你可以在 {} 中间添加你想要的配置。记住要按照 JSON 格式的规则：每个配置项都要用逗号分隔，最后一项不需要逗号。

分享我自用的一个vscode配色方案-参考jetbrains的idea的darcular

文章评论