編輯

顏色主題

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

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

本指南將介紹建立主題的不同方式。

工作臺顏色

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

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

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

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

語法顏色

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

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

例如，以下程式碼將更改編輯器中註釋的顏色

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

該設定支援一個簡單模型，其中包含一組常用的標記型別，如“註釋”、“字串”和“數字”。如果您想對更多內容進行著色，則需要直接使用 TextMate 主題規則，這在語法高亮指南中進行了詳細解釋。

語義顏色

VS Code 1.43 版中提供了 TypeScript 和 JavaScript 的語義高亮。我們預計其他語言也將很快採用它。

語義高亮根據來自語言服務的符號資訊豐富語法著色，語言服務對專案有更完整的理解。一旦語言伺服器執行並計算出語義標記，著色更改就會出現。

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

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

為特定主題啟用語義高亮

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

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

建立新的顏色主題

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

使用命令面板中的開發者：從當前設定生成顏色主題命令生成主題檔案
使用 VS Code 的Yeoman擴充套件生成器生成新的主題擴充套件
```
npm install -g yo generator-code
yo code
```
如果您按照上述說明自定義了主題，請選擇“重新開始”。
將從您的設定生成的主題檔案複製到新的擴充套件程式。

您還可以透過告訴擴充套件生成器匯入 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

主題檔案的更改會即時應用於擴充套件開發主機視窗。

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

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

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

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

新增新的顏色 ID

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

進一步閱讀

CSS 技巧 - 建立 VS Code 主題

09/11/2025