顏色主題

Visual Studio Code 使用者介面中可見的顏色分為兩類：

工作區顏色，用於檢視和編輯器，從活動欄到狀態列。所有這些顏色的完整列表可以在主題顏色參考中找到。
編輯器中原始碼的語法顏色和樣式。這些顏色的主題設定不同，因為語法著色基於 TextMate 語法和 TextMate 主題，以及語義標記。

本指南將介紹您可以建立主題的各種方法。

工作區顏色

建立新的工作區顏色主題的最簡單方法是從現有顏色主題開始並對其進行自定義。首先切換到要修改的顏色主題，然後開啟您的設定，並對 workbench.colorCustomizations 設定進行更改。更改會即時應用到您的 VS Code 例項。

例如，以下將更改標題欄的背景顏色。

{
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#ff0000"
  }
}

所有可主題化顏色的完整列表可以在顏色參考中找到。

語法顏色

對於語法高亮顏色，有兩種方法。您可以引用社群中現有的 TextMate 主題（.tmTheme 檔案），或者您可以建立自己的主題規則。最簡單的方法是像上面工作區顏色部分那樣，從現有主題開始並進行自定義。

首先切換到要自定義的顏色主題，並使用 editor.tokenColorCustomizations 設定。更改會即時應用到您的 VS Code 例項，無需重新整理或重新載入。

例如，以下將更改編輯器內註釋的顏色。

{
  "editor.tokenColorCustomizations": {
    "comments": "#FF0000"
  }
}

該設定支援一個簡單的模型，其中包含一組常用的令牌型別，例如“comments”、“strings”和“numbers”。如果您想為更多內容著色，則需要直接使用 TextMate 主題規則，這將在語法高亮指南中詳細解釋。

語義顏色

語義高亮功能已在 VS Code 1.43 版本中對 TypeScript 和 JavaScript 可用。我們預計其他語言也將很快採用。

語義高亮基於語言服務中的符號資訊豐富語法著色，語言服務對專案有更全面的理解。一旦語言伺服器執行並計算出語義標記，著色更改就會出現。

每個主題都透過主題定義中的特定設定來控制是否啟用語義高亮。每個語義標記的樣式由主題的樣式規則定義。

使用者可以使用 editor.tokenColorCustomizations 設定覆蓋語義高亮功能和著色規則。

為特定主題啟用語義高亮

"editor.tokenColorCustomizations": {
    "[Material Theme]": {
        "semanticHighlighting": true
    }
},

主題可以為語義標記定義主題規則，如語法高亮指南中所述。

建立新的顏色主題

使用 workbench.colorCustomizations 和 editor.tokenColorCustomizations 調整好主題顏色後，就可以建立實際的主題了。

使用命令面板中的Developer: Generate Color Theme from Current Settings命令生成主題檔案。
使用 VS Code 的 Yeoman 擴充套件生成器生成新的主題擴充套件。
```
npm install -g yo generator-code
yo code
```
如果您按照上述方法自定義了主題，請選擇“Start fresh”（從頭開始）。
將從設定生成的主題檔案複製到新擴充套件中。

您也可以透過指示擴充套件生成器匯入 TextMate 主題檔案（.tmTheme）並將其打包以供 VS Code 使用，來使用現有的 TextMate 主題。或者，如果您已經下載了主題，請將 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 主題可供選擇。選擇一個您喜歡的主題，並複製下載連結以用於 Yeoman 生成器或您的擴充套件中。格式將類似於 "https://raw.githubusercontent.com/Colorsublime/Colorsublime-Themes/master/themes/(name).tmTheme"。

測試新的顏色主題

要試用新主題，請按 F5 啟動擴充套件開發主機視窗。

在那裡，透過檔案 > 首選項 > 主題 > 顏色主題 開啟顏色主題選擇器，您就可以在下拉列表中看到您的主題。向上或向下箭頭可檢視主題的即時預覽。

select my theme

對主題檔案的更改會即時應用到 Extension Development Host 視窗中。

將主題釋出到擴充套件市場

如果您想與社群分享您的新主題，可以將其釋出到擴充套件市場。使用vsce 釋出工具打包您的主題並將其釋出到 VS Code Marketplace。

提示：為了讓使用者更容易找到您的主題，請在擴充套件描述中包含“theme”一詞，並在 package.json 中將 Category 設定為 Themes。

我們還有關於如何讓您的擴充套件在 VS Code Marketplace 上看起來很棒的建議，請參閱市場展示技巧。

新增新的顏色 ID

擴充套件也可以透過顏色貢獻點貢獻顏色 ID。在使用 workbench.colorCustomizations 設定和顏色主題定義檔案中的程式碼補全時，也會出現這些顏色。使用者可以在擴充套件貢獻選項卡中檢視擴充套件定義的顏色。

進一步閱讀

CSS Tricks - 建立 VS Code 主題

12/10/2025