VS Code插件開發教程（6）顏色主題一覽 Color Theme

Visual Studio Code用戶界面中的顏色分爲兩類：git

工做區（Workbench）顏色：用在視圖和編輯器中，包含Activity Bar、Status Bar，完整的顏色清單能夠在 Theme Color 查到
語法顏色：用於編輯器中的源碼高亮，這部分顏色和具體的語法以及語言的token有關

本篇教程將會涉及建立顏色主題的各類方法github

工做臺顏色

最簡單的建立工做臺顏色主題的方式是從一個已有的主題出發進行自定義改造，首先在顏色主題 -> 首選項裏選中一個你喜歡的顏色主題，而後打開settings.json文件，配置workbench.colorCustomizations字段，修改會實時生效。舉例而言，下面這段代碼將會改變title bar的顏色：npm

{
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#ff0000"
  }
}
複製代碼

完整的顏色配置項能夠在此處查詢 Theme Color編程

語法顏色（Syntax）

有兩種方式生成本身的語法顏色：json

從社區一個既有的 TextMate 主題（.tmTheme文件）的基礎上進行修改，這是最簡單的方式，相似上文中的工做臺顏色主題的方式
從零開始，本身建立語法主題

從已有的主題建立的話，首先切換到想要修改的顏色主題上，而後編輯settings.json文件，修改editor.tokenColorCustomizations字段，例以下段代碼將會修改註釋的顏色：api

{
  "editor.tokenColorCustomizations": {
    "comments": "#FF0000"
  }
}
複製代碼

更多信息可見 Syntax Highlight Guide服務器

語義顏色（Semantic）

語義顏色是自VS Code 1.43發佈的一個新功能，是根據language service提供的符號信息對語法顏色的加強。目前僅支持TypeScript、JavaScript，以後會增長對其它語言的支持。顏色的渲染是從language service啓動、計算完畢語義符號開始的。markdown

用戶能夠用editor.tokenColorCustomizations字段覆蓋制定主題的語義高亮：app

"editor.tokenColorCustomizations": {
    "[Material Theme]": {
        "semanticHighlighting": true
    }
}
複製代碼

更多的信息參見 Syntax Highlight Guide編輯器

建立一個顏色主題

經過Command Palette執行Developer: Generate Color Theme from Current Settings命令，以現有的主題爲基礎建立主題文件

用generator-code建立一個主題拓展

npm install -g yo generator-code
yo code
複製代碼

選擇Start fresh
拷貝主題文件到生成的插件項目裏

你能夠在使用generator-code的時候導入一個已經存在的 TextMate 主題（.tmTheme文件），或者你能夠下載一個主題文件，而後將tokenColors替換爲文件（.tmTheme）路徑：

{
  "type": "dark",
  "colors": {
    "editor.background": "#1e1e1e",
    "editor.foreground": "#d4d4d4",
    "editorIndentGuide.background": "#404040",
    "editorRuler.foreground": "#333333",
    "activityBarBadge.background": "#007acc",
    "sideBarTitle.foreground": "#bbbbbb"
  },
  "tokenColors": "./Diner.tmTheme"
}
複製代碼

在編寫主題時，將文件後綴寫爲 -color-theme.json將會得到代碼補全以及自動提示的功能。此外，在 ColorSublime 能夠查閱到大量的 TextMate 主題，你能夠將其下載連接（格式相似"https://raw.githubusercontent.com/Colorsublime/Colorsublime-Themes/master/themes/(name).tmTheme"）直接用在generator-code中或者拓展裏

測試顏色主題

按F5鍵啓動調試模式，而後從 File > Preferences > Color Theme 選中本身建立的主題查看效果，調試狀態下對主題文件的修改會實時生效

發佈顏色主題

你能夠經過 vsce publishing tool 將主題發佈到插件集市，以便和你們分享你的主題，同時 Marketplace Presentation Tips 會對你發佈到插件集市優化上有所幫助

將package.json裏的Category字段名稱設置爲Themes能夠讓用戶更容易找到你的主題

建立顏色ID

你能夠經過 color contribution point 來建立本身的顏色ID，這樣顏色就能夠用在color contribution point和顏色主題文件裏的代碼自動補全，用戶能夠在Contributions tab下看到該插件定義的顏色

有待進一步研究的問題

以更加直觀的方式說明顏色ID的實際含義及用途

VS Code插件開發教程（6） 顏色主題一覽 Color Theme