顏色主題

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 市集。

提示：為了讓使用者更容易找到您的佈景主題，請在擴充功能描述中包含「theme」這個詞，並在您的 package.json 中將 Category 設定為 Themes。

我們同時也提供關於如何讓您的擴充功能在 VS Code 市集中看起來更棒的建議，請參閱市集呈現提示。

新增色彩識別碼

色彩識別碼也可以透過色彩貢獻點由擴充功能提供。當在 workbench.colorCustomizations 設定與色彩佈景主題定義檔案中使用程式碼自動完成時，這些色彩也會出現。使用者可以在擴充功能貢獻標籤頁中看到擴充功能定義了哪些色彩。

進階閱讀

CSS 技巧 - 建立 VS Code 佈景主題

7/29/2026