天天看點

VS Code自定義配色方案VS Code自定義配色方案

VS Code自定義配色方案

VSCode有很多好看的主題插件,在插件搜尋框輸入theme即可,網上也有大佬們的推薦,但是都不太符合我的審美習慣,是以又花了幾天時間研究了一下VSCode的自定義配色tokenColors,這裡貼出來我的配色json,主要是針對C語言的,其他語言也類似,注釋還是挺詳細的,大家可以也根據自己的喜好重新配色。

建議把配置json代碼放在全局settings中(Ctrl+Shift+P,輸入settings,會看到Open Settings和Open Workspace Settings,分别是全局設定和目前工程的設定),就可以一勞永逸了。

{
    "editor.fontSize": 16,
    "search.exclude": {     //不需要使用搜尋的檔案
    
        },
    "files.exclude": {      //不需要顯示的檔案
          "Listings":true,
          "Objects":true
        },
    "window.zoomLevel": 0.5,                      //視窗縮放 預設是0
    "workbench.colorCustomizations":{
        "editor.background": "#181818",         //編輯器背景
        "sideBar.background": "#202020",        //側邊欄背景
        "editor.lineHighlightBackground": "#002535",//光标所在行背景色
        "editor.selectionBackground": "#005585",    //選中内容背景色
        "statusBar.background": "#252525",          //底部狀态欄背景色
        "activityBar.background": "#252525",        //最左側活動欄背景色
        "tab.activeBackground": "#505050",          //活動欄/标簽背景色
        "tab.activeForeground": "#e0e0e0",          //活動欄/标簽文字顔色
        //"editorBracketMatch.border": "#ff06ff",     //比對括号框線顔色
        "editorCursor.foreground": "#ffffff",       //光标顔色
        "sideBarSectionHeader.foreground": "#ebebeb",//大綱字型顔色
        "sideBarSectionHeader.background": "#303030",//大綱背景顔色
        "sideBar.foreground": "#c5c5c5",             //側邊欄前景色
    },
    "editor.tokenColorCustomizations": {
        "comments": "#a3a3a3",
        "functions": "#dfdfdf",
        "strings":"#dd4949",
        "numbers": "#377bd4",
        //"keywords": "#ec8b30ee",
        //"variables": "#dfdfdf",
        "textMateRules": [
            //entity.name.function",                    //直接調用的函數
            //entity.name.type",                        //typedef定義的變量
            //keyword.control",                         //if switch break return
            //keyword.operator.assignment",             // =等号/指派号 |= &=
            //"keyword.operator.logical",               //邏輯符号 && || !
            //"constant.character.escape",              //"\r\n"\
            //constant.other.placeholder",              //"%s %c"
            //punctuation.definition.comment",          // // /*注釋開頭
            //constant.numeric",                        //數字:50 10  0x20的20部分
            //keyword.operator.word                     //and or not
            //"scope":"meta",                           //括号 函數聲明的括号 調用的括号...
            //punctuation.separator",                   //冒号 逗号
            //punctuation.terminator",                  //分号
            //storage.modifier",                        //static const
            //string.quoted.single",                    //單引号字元串
            //string.quoted.double",                    //雙引号字元串
            //string.quoted.triple",                    //三引号字元串
            //"storage.type",                           //void int char 
            //"punctuation.definition.string.begin",    //左雙引号
            //"punctuation.definition.string.end",      //右雙引号
            {
                "scope":"support.function",
                "settings": {
                    "foreground": "#FF0000",
                    "fontStyle": "bold"
                }
            },
            {                                           
                "scope":"entity.name.type",             //typedef定義的變量
                "settings": {
                    "foreground": "#15ced4de",
                }
            },
            {
                "scope":"storage.type",                 //void int char 
                "settings": {
                    "foreground": "#15ced4de",
                }
            },
            {
                "scope":"storage.modifier",             //static const
                "settings": {
                    "foreground": "#15ced4de",
                }
            },
            {
                "scope":"keyword.operator",             //=等号/指派号 |= &=
                "settings": {
                    "foreground": "#f051a0",
                }
            },
            {
                "scope":"keyword.control",              //if switch break return
                "settings": {
                    "foreground": "#c67ed4",
                    "fontStyle": ""
                }
            },
            {
                "scope":"keyword.operator.logical",       //邏輯符号 && || !
                "settings": {
                    "foreground": "#d6511c",
                    "fontStyle": ""
                }
            },
            {
                "scope":"constant.character.escape",    //"\r\n"
                "settings": {
                    "foreground": "#ee5050",
                    "fontStyle": ""
                }
            },
            {
                "scope":"variable.other",             //結構體對象和成員等
                "settings": {                         //VSCode使用C的顔色限制,這一點比較坑
                    "foreground": "#dfdfdf",          //比如Public.Delay(),顔色是一起變得
                    "fontStyle": ""                   //不能單獨設定Public和Delay的顯示顔色
                }								      //可能因為VS Code主要用于前端,對C的支援不夠完善
            },
            {
                "scope":"variable.parameter",           //函數參數-定義階段
                "settings": {
                    "foreground": "#dfdfdf",
                    "fontStyle": ""
                }
            },
            {
                "scope":"entity.name.section",          //函數參數-調用階段
                "settings": {
                    "foreground": "#b66767",
                    "fontStyle": ""
                }
            }
        ]
    }
}
           

此外推薦一個很漂亮的圖示插件 VS Code Great Icons

VS Code自定義配色方案VS Code自定義配色方案

繼續閱讀