vscode主題

vscode主題

顏色主題可以修改成你喜歡的vscode工作環境的界面的顏色。

選擇顏色主題

1. 點擊菜單欄: File > Preferences > Color Theme
2. 或者使用快捷鍵 ctrl+k ctrl+t
3. 使用方向鍵選擇喜歡的主題

選中的顏色主題會保存在用戶級設置裏

"workbench.colorTheme": "Default Dark+"

小提示: 默認情況下，顏色主題是保存在用戶級的設置裏，並且在全部工程裏都是生效的。但是也可以在工程級別的設置裏設置只屬於這個工程的顏色主題

安裝主題

vscode有幾個開箱即用的主題可以嘗試使用。

插件市場有很多社區化的主題可供下載。可以找到你喜歡的主題，安裝後，重啓vscode，即可使用。

可以在插件面板的搜索框，使用 @category:"themes" 來過濾主題

自定義顏色主題

工作臺顏色

可以通過修改設置項 workbench.colorCustomizations 和 editor.tokenColorCustomizations 來修改自定義的顏色主題。

要設置vscode界面元素的顏色(如文件資源管理器的列表、樹、建議提示框、diff編輯器、活動條、提示、滾動條、分割條、按鈕等等)，可以修改設置項 workbench.colorCustomizations

設置 workbench.colorCustomizations 時，vscode會有智能提示，也可查看文檔 。

只定義設置指定的主題，可以使用下面的語法:

"workbench.colorCustomizations": {
    "[Monokai]": {
        "sideBar.background": "#347890"
    }
}

編輯區語法高亮

設置項 editor.tokenColorCustomizations 可修改語法高亮的顏色。

一些預設置的語法項在很多結構裏都是可用的，如comments、strings，可以直接指定testMeta的顏色主題規則，如：

請注意: 直接配置testMeta規則是一個高級的技巧，你需要了解textMeta的語法。詳情可查看文檔

下面是一個只指定主題的例子

"editor.tokenColorCustomizations": {
    "[Monokai]": {
        "comments": "#229977"
    }
},

編輯區語義高亮

一些語言(當前有：TypeScript、JavaScript、Java)提供了語義標記。語義標記基於語言服務符號的理解，比語法標記更加精確，來自於基於正則表達式的TextMeta語法。語義高亮是在語法高亮上面計算出來的，並且是更加準確和豐富，如下所示：

不帶語義高亮的 Tomorrow Night Blue 主題

帶語義高亮的 Tomorrow Night Blue 主題

注意語言服務符號理解的不同顏色：

• 第10行，languageModes是作爲參數的顏色
• 第11行，Range和Position是類的顏色，document是參數的顏色
• 第13行，getFoldingRanges是方法顏色 設置項 editor.semanticHighlighting.enabled 來控制語義高亮效果是否生效。可以有以下值： true false configuredByTheme。
• true 和 false 用來控制所有主題的語義高亮
• configuredByTheme 是默認值，並且告訴每個主題的語義高亮是否開啓。vscode所有主題的語義高亮默認都是開啓的。

用戶可以通過覆蓋下面的設置來進行設置主題：

"editor.semanticTokenColorCustomizations": {
    "[Rouge]": {
        "enabled": true
    }
},

語言的語義是否可用，並且語義高亮是否開啓，取決於主題是否配置了語義標記的顏色。一些語義標記是標準化的，並缺映射到已經建立好的TextMate上面。如果主題有對應的這些TextMate的顏色規則，這些語義標記就會顯示對應的顏色，不需要任何其他額外的顏色規則。

editor.semanticTokenColorCustomizations" 可以配置額外的樣式規則。

"editor.semanticTokenColorCustomizations": {
    "[Rouge]": {
        "enabled": true,
        "rules": {
            "*.declaration": { "bold": true }
        }
    }
},

要查看語義標記如何顯示及顯示風格，可以執行命令 Developer: Inspect Editor Tokens and Scopes ，然後會在當前位置顯示相關信息。 如果當前使用的編程語言在當前的位置有可用的語義標記，並且主題也開啓了語義標記，就會顯示一個語義標記工具提示框。該部分會顯示語義標記的信息(類型和修改數量)和要執行的風格規則。

詳情請查看文檔

創建自己的主題顏色

創建和發佈主題插件是非常容易的。在用戶設置裏自定義顏色，然後使用 Developer: Generate Color Theme From Current Settings 命令來生成顏色主題。

vscode的插件生成器 yeoman會幫你生成插件的剩餘部分。

生成主題插件，詳情可查看文檔

刪除默認的顏色主題

如果想刪除vscode自帶的主題，可以打開插件面板，點擊上訪的杯子按鈕，選擇built-in，選擇想關閉的主題，點擊disable，即可關閉選中的主題。

文件圖標主題

文件圖標主題可以通過插件的方式發佈，用戶可以選擇設置成他們喜歡的文件圖標主題。文件圖標主題會顯示在資源管理器和標籤頁上。

選擇文件圖標主題

1. 點擊菜單欄： File > Preferences > File Icon Themes
2. 也可以執行命令: Preferences: File Icon Them
3. 使用上下方向鍵選擇文件圖標主題，可以進行預覽
4. 按enter鍵，選中喜歡的主題

默認使用的文件圖標主題是 Seti 。一旦選中了使用某一個文件圖標主題，重啓後也會使用這個選中的文件圖標主題。選擇 None 可以關閉文件圖標主題。

vscode內置了兩個文件圖標主題， Minimal 和 Seti 。在選擇文件圖標主題的列表裏面，選擇 Install Additional File Icon Themes 項來安裝其他文件圖標主題。這個也是通過插件面板來進行安裝的。

正在使用的文件圖標主題是保存在設置裏面的: "workbench.iconTheme": "vs-seti"

創建自己的文件圖標主題

可以使用svg格式的文件來創建自己的文件圖標主題，詳情請看文檔