VSCode顏色主題自定義

進入vscode的設置頁面，打開setting.json文件，可以進行用戶自定義配置

vscode版本1.51.0，操作系統win10。

 

自定義界面ui配色

配置文件內的設置會優先生效。

修改編輯器內代碼顏色 

語法高亮顏色在"editor.tokenColorCustomizations"參數下編輯。
1.數據類型匹配
可以直接通過基本的數據類型關鍵字改變編輯器內代碼配色

 

2.文本內容匹配
為了方便更精確的改變編輯器內的語法高亮，vscode可以通過“TM”規則的文本作用域來自定義一些代碼段的顏色

如何查看作用域：
1.按快捷鍵F1或者組合鍵ctrl+shift+p打開命令輸入框，輸入關鍵字“scopes”，找到並選擇“開發人員：檢查編輯器標記和作用域”選項；
2.點擊代碼中想要改變顏色的代碼段，即可顯示關於該代碼段的說明和作用域，然后將其復制並粘貼到setting.json文件里的scope字段下，即可。
*可以看到一個代碼段的作用域可能有多個，它們分別代表着不同的作用范圍（作用范圍由小到大自上而下排列，也就是說，最上面的一條代表着范圍最小最精確的作用域）
*參考鏈接：https://geek-docs.com/vscode/vscode-tutorials/vscode-modify-editor-color-matching.html
圖1：

圖2：

控制台內容顯示配色

控制台（終端）內的文字顏色和打印內容的顏色vscode好像不能直接從settings.json文件里設置
不過只要終端能夠解釋ANSI轉義序列，就能夠使用ANSI轉義序列輸出顏色
（具體內容可以參考這里：https://www.cnblogs.com/opangle/p/4082692.html）

--------

以下是我的settings.json文件的配置代碼，以供參考。
（更完整的主題顏色配置說明，可以閱讀vscode關於主題配色的官方說明文檔。鏈接：https://code.visualstudio.com/api/references/theme-color）

{
    "workbench.iconTheme": "vscode-icons",
    "workbench.colorTheme": "Solarized Dark",
    "editor.fontFamily": "Consolas, Small Fonts, Segoe MDL2 Assets, Lucida Console, Comic Sans MS, Calibri, 幼圓, Consolas, monospace, 'Courier New'",
    "window.zoomLevel": 0,
    // "editor.codeActionsOnSave": null,

    //終端
    "terminal.integrated.cursorBlinking": true,//控制終端光標是否閃爍
    "terminal.integrated.lineHeight": 1.1,//終端的行高
    // "terminal.integrated.letterSpacing": 0.1,
    // "terminal.integrated.fontSize": 11, //字體大小設置
    // "terminal.integrated.fontFamily": "Small Fonts, Lucida Console", //字體設置
    // "terminal.integrated.shell.linux": "/bin/zsh",
    // "terminal.integrated.shell.windows": null,//終端在 Windows 上使用的 shell 的路徑

    //各個ui組件顏色設置
    "workbench.colorCustomizations": {  
        //頂部菜單欄
        "titleBar.activeBackground": "#002C39",//窗口處於活動狀態時頂部菜單欄背景色
        // "titleBar.activeForeground": "#ff0000",//窗口處於活動狀態時頂部菜單欄前景色
        "titleBar.border": "#04799c",//頂部菜單欄邊框顏色
        "titleBar.inactiveBackground": "#6c7679",//窗口處於非活動狀態時頂部菜單欄背景色
        // "titleBar.inactiveForeground": "#ff0000",//窗口處於非活動狀態時頂部菜單欄前景色
        
        //底部狀態欄
        "statusBar.background": "#0e440e",// 底部狀態欄#0e440e,#28556e,#00212B
        // "statusBar.noFolderBackground": "#000",//沒有打開文件夾時狀態欄的背景色#00212B
        "statusBar.debuggingBackground": "#038803",//調試程序時狀態欄的背景色
        "statusBar.debuggingForeground": "#eafdfd",//#93a1a1調試程序時狀態欄的字體色
        // "statusBar.border": "#c288c4",//狀態欄分隔側邊欄和編輯器的邊框顏色
        "statusBar.foreground": "#93A1A1",
        // "statusBarItem.remoteBackground": "#2AA19899",//#2AA19899
        // "statusBarItem.prominentBackground": "#003847",//#003847
        // "statusBarItem.prominentHoverBackground": "#f70505",//#003847
        // "debugToolBar.background": "#0a5329",//調試工具欄背景顏色#00212B
        // "debugExceptionWidget.background": "#8ebcca",//異常小組件背景顏色#00212B
        // "debugExceptionWidget.border": "#AB395B",//異常小組件邊框顏色#AB395B

        //資源管理器
        // "sideBar.background": "#000",//資源管理器頁面背景色
        // "sideBarSectionHeader.border": "#c48888",//側邊欄節標題的邊框顏色
        // "sideBarSectionHeader.background": "#ff0000",//側邊欄節標題的背景顏色
        // "sideBar.foreground": "#0be8f0",//側邊欄文件名顏色
        // "activityBar.border": "#1c5532",//側邊欄邊框分隔活動欄的邊框顏色
        // "sideBar.border": "#8ac488",//側邊欄分隔編輯器的邊框顏色
        // "sideBarTitle.foreground": "#c48888",//側邊欄標題前景色
        "sideBarSectionHeader.foreground": "#799ea3",//側邊欄節標題的前景色
        // "sideBarSectionHeader.background": "#000",//側邊欄節標題的背景顏色
        // "sideBar.dropBackground": "#ff0000",//側邊欄中的部分在拖放時的反饋顏色
        //資源管理器內文件列表
        "list.activeSelectionBackground": "#003440",//選中文件時的背景色#005a6f
        "list.inactiveSelectionBackground": "#003440",//選中文件非活動時時的背景色#003440
        "list.activeSelectionForeground": "#e7c70e",//選中文件時的前景色#dabb0d
        "list.inactiveSelectionForeground": "#e7c70e",//選中文件非活動時時的前景色#058637
        "list.hoverBackground": "#043a467a",//鼠標懸停文件上方時的背景色
        "list.hoverForeground": "#e7c60e91",//鼠標懸停文件上方時的前景色
        // "list.errorForeground": "#ff0000",//包含錯誤的列表項的前景顏色
        
        //終端控制台
        // "panel.background": "#164123",//控制台背景色
        "panel.border": "#04799ca4",//控制台與編輯器分割線顏色#04799c
        // "panelInput.border": "#ff0000",//調試控制台篩選器邊框顏色
        // "panelTitle.activeBorder": "#fdfdfd",//活動面板標題的下邊框顏色
        "panelTitle.activeForeground": "#faf8f8",//活動面板的標題顏色
        // "panelTitle.inactiveForeground": "#ff0000",//非活動面板的標題顏色

        // "terminal.background": "#181818",//終端的背景顏色
        // "terminal.foreground": "#50b962",//終端的前景顏色#26e045
        // "terminalCursor.background": "#D8D8D8",//終端光標的背景色
        // "terminalCursor.foreground": "#D8D8D8",//終端光標的前景色
        "terminal.ansiBlack": "#181818",
        "terminal.ansiBlue": "#7CAFC2",
        "terminal.ansiBrightBlack": "#585858",
        "terminal.ansiBrightBlue": "#7CAFC2",
        "terminal.ansiBrightCyan": "#86C1B9",//#86C1B9
        "terminal.ansiBrightGreen": "#A1B56C",
        "terminal.ansiBrightMagenta": "#BA8BAF",
        "terminal.ansiBrightRed": "#AB4642",
        "terminal.ansiBrightWhite": "#F8F8F8",//#F8F8F8
        "terminal.ansiBrightYellow": "#caf50a",//終端輸入“python”的顏色#F7CA88,#f5970a
        "terminal.ansiCyan": "#305352",//按F5時終端調試時的一串文字的顏色#86C1B9,#465c59
        "terminal.ansiGreen": "#A1B56C",
        "terminal.ansiMagenta": "#BA8BAF",
        "terminal.ansiRed": "#AB4642",
        "terminal.ansiWhite": "#D8D8D8",//#D8D8D8
        "terminal.ansiYellow": "#F7CA88",//#F7CA88
        // "terminal.selectionBackground": "#ff0000",//終端選中內容的背景顏色
        
        //側邊欄
        // "activityBar.background": "#000",//界面側邊欄（活動欄）
        // "activityBar.activeBorder": "#5f7770",//界面側邊欄-選項卡選中邊框顏色#5f7770
        "activityBar.activeBackground": "#218376",//界面側邊欄-活動欄選項卡選中背景標記
        // "activityBar.foreground": "#f8a7a4",//界面側邊欄前景色

        //通知
        "badge.background": "#6f78a8",//通知徽章背景色。743a8f
        "badge.foreground": "#fdfcfc",//通知徽章前景色。
        "activityBarBadge.background":"#fdfcfc",//側邊活動欄通知徽章背景色
        "activityBarBadge.foreground": "#003847",//側邊活動欄通知徽章前景色218376

        //編輯器選項卡
        // "tab.inactiveBackground": "#000",//非活動選項卡的背景色
        // "tab.inactiveForeground": "#000",//非活動選項卡的前景色
        // "tab.activeBackground": "#493f3f",//編輯器當前正在編輯文件選項卡標記  b8b9988c
        "tab.hoverBackground": "#3e666b",//當前鼠標懸停的選項卡背景色（編輯器活動組內）
        "tab.hoverForeground": "#d8e0e2cb",//當前鼠標懸停的選項卡前景色（編輯器活動組內）
        "tab.activeForeground": "#e7c70e",//活動組中活動選項卡的前景色e7c70e#2e9c4a#14d66b
        // "tab.activeBorder": "#92c488",//活動選項卡底部的邊框
        // "diffEditor.border": "#ff0000",//兩個文本編輯器之間的邊框顏色
        // "tab.border": "#01303d",//將選項卡彼此分隔開的邊框顏色#003847
        "tab.activeBorderTop": "#00d9ff",//活動選項卡頂部的邊框
        // "tab.hoverBorder": "#00d9ff",//選項卡被懸停時用於突出顯示的邊框(在底部)

        //菜單欄
        // "menubar.selectionBackground": "#C48888",//頂部所選菜單欄
        // "menu.selectionBackground": "#73c720",//菜單欄內所選項
        // "menu.selectionBorder": "#C48888",//菜單中所選菜單項的邊框顏色
        // "menu.foreground": "#fdf4c1",//菜單項的前景顏色
        // "menu.background": "#c48888",//菜單項的背景顏色
        // "menu.separatorBackground": "#eb0c0c",//菜單中分隔線的顏色

        //編輯器
        // "editor.selectionBackground": "#701c81",//選中內容的背景顏色135564,#2e4e52
        // "editor.findMatchBorder": "#ff0000",
        // "editor.selectionHighlightBackground": "#4f486da9",//單機點擊代碼后的顏色&與所選內容具有相同內容的區域顏色135564，135564ab
        // "editor.selectionHighlightBorder": "#ff0000",//與所選項內容相同的區域的邊框顏色。
        // "editor.rangeHighlightBackground": "#ff0000",//當前搜索匹配項所在行的背景色
        "editor.rangeHighlightBorder": "#f1ebeb",//當前搜索匹配項所在行的邊框背景色
        "editor.selectionForeground": "#ee4444",//fcfcfc，ee444
        // "editor.hoverHighlightBackground": "#f03c81",//鼠標懸停內容的顏色
        "editor.findMatchBackground": "#ffee00",//當前搜索匹配項的顏色
        "editor.findMatchHighlightBackground": "#797874ef",//其他搜索匹配項的顏色
        "editor.findMatchHighlightBorder": "#ffee00cb",//其他搜索匹配項的邊框顏色
        // "editorBracketMatch.background": "#ff0000",//匹配括號的背景色
        // "editorBracketMatch.border": "#ff0000",//匹配括號的背景邊框色
        "editorCursor.background": "#f9faf9",//編輯器光標背景色
        "editorCursor.foreground": "#f9faf9",//編輯器光標顏色
        // "editor.lineHighlightBackground": "#0f56687e",//光標所在行高亮文本的背景顏色0f56687e
        // "editor.lineHighlightBorder": "#ddeb1221",//光標所在行高亮文本的邊框色
        "textCodeBlock.background": "#99198e94",//9bf706
        "editor.wordHighlightBackground": "#04fcc6",//單機點擊選擇相同代碼后的顏色(主要用於html標簽)
        "editorGutter.background": "#1e3441",//編輯器導航線的背景色，導航線包括邊緣符號和行號
        "editorLineNumber.foreground": "#acb9b8",//編輯器行號顏色
        // "editorLineNumber.activeForeground": "#faf5f5",//編輯器活動行號的顏色
        // "editor.background": "#002B36",//編輯器背景顏色（這個設置會影響控制台背景色）
        // "editor.foreground": "#f5f0f0",//編輯器默認前景色(字體顏色)
        "list.focusBackground": "#006f21",//在編輯器中輸入內容時聯想列表內被選中項的背景色#005a6f,#7be00886,#7be00881
        // "editorWidget.background": "#013b4d",//編輯器組件(如查找/替換/輸入聯想框)背景顏色。#00212B,013b4d
        "editorWidget.border": "#078d7b",//編輯器小部件的邊框顏色
        // "editorWidget.foreground": "#ff0000",//編輯器小部件的前景色
        // "editorHoverWidget.background": "#004052",//編輯器懸停提示的背景顏色#004052
        "editorWidget.resizeBorder": "#0cbda5",//編輯器小部件大小調整條的邊框顏色
        "editorWhitespace.foreground": "#e9e8f0d0",//編輯器選中空白字符（如空格）時字符的顏色
        "minimap.selectionHighlight": "#e4ebea",//編輯器選區在迷你地圖中對應的標記顏色#274642
        // "editorIndentGuide.background": "#93A1A180",//編輯器縮進參考線的顏色#93A1A180
        // "editorIndentGuide.activeBackground": "#C3E1E180",//編輯器活動縮進參考線的顏色#C3E1E180
    },
    //編輯器內容--代碼段顏色&語法高亮顏色
    "editor.tokenColorCustomizations": {
        // "comments": "#9ea023da",//注釋
        // "keywords": "#0a0",//關鍵字
        // "variables": "#f00",//變量名
        // "strings": "#18170fbd",//字符串
        // "functions": "#fc735bc9",//函數名
        // "numbers": "#AE81FF",//數字
        // "types": "#e0139c",//類型名
        "storage": "#FF0000",
        "textMateRules": [
            //函數
            {
                "scope": "meta.function-call.generic.python",
                "settings": {
                    "foreground": "#0f7fd2"//#578dac, ##0f7fd2, #78a7cc,#84b6dd
                }
            },
            //函數內固定參數名
            {
                "scope": "variable.parameter.function-call.python",
                "settings": {
                    "foreground": "#6b689efb"//#859900,79831f
                }
            },
            //三引號注釋
            {
                "scope": "string.quoted.docstring.multi.python",
                "settings": {
                    "foreground": "#10d4b0"//#709baa,
                }
            },
            // //類名&方法名
            // {
            //     "scope": "storage.type",
            //     "settings": {
            //         "foreground": "#a8b1a6"
            //     }
            // },
            //關鍵字
            {
                "name": "keyword",
                "scope": "keyword.control.flow.python",
                "settings": {
                    "foreground": "#14b414"//#29cf3d, #049415, #14b414
                }
            },
            //類型名稱
            {
                "name": "types",
                // "scope": ["comment", "comment",],
                "scope": "support.type.python",
                "settings": {
                    "foreground": "#eea0cd"//#eea0cd
                }
            },
        ]
    },
    // "editor.fontLigatures": null,

    //設置不同語言的縮進距離
    // "[python]": {
    //     "editor.tabSize": 4
    // },
    "[html]": {
        "editor.tabSize": 2
    },
    "[css]": {
        "editor.tabSize": 2
    },
    "[javascript]": {
        "editor.tabSize": 2
    },
}

End