顏色主題

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

工作台（Workbench）顏色：用於檢視和編輯器，從活動列（Activity Bar）到狀態列（Status Bar）。這些顏色的完整列表可以在主題顏色參考中找到。
語法顏色與樣式：用於編輯器中的原始程式碼。這些顏色的主題設定方式有所不同，因為語法上色是基於 TextMate 文法、TextMate 主題以及語意標記（semantic tokens）所建構的。

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

工作台顏色

建立新工作台顏色主題最簡單的方法是從現有的色彩主題開始並進行自訂。首先，切換到您想要修改的色彩主題，然後開啟您的設定並修改 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 已提供語意高亮顯示（Semantic highlighting）功能。我們預計其他語言也將很快跟進採用。

語意高亮顯示基於語言服務提供的符號資訊來豐富語法上色，因為語言服務對專案有更完整的理解。一旦語言伺服器執行並計算出語意標記後，顏色變更就會出現。

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

使用者可以使用 editor.tokenColorCustomizations 設定來覆寫語意高亮顯示功能及上色規則

為特定主題啟用語意高亮顯示

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

主題可以針對語意標記定義主題規則，如語法高亮顯示指南所述。

建立新的色彩主題

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

使用指令選擇區（Command Palette）中的 Developer: Generate Color Theme from Current Settings 指令來產生主題檔案
使用 VS Code 的 Yeoman 擴充功能產生器來建立新的主題擴充功能
```
npm install -g yo generator-code
yo code
```
如果您如上所述自訂了主題，請選擇「Start fresh」。
將從您的設定產生的主題檔案複製到新的擴充功能中。

您也可以使用現有的 TextMate 主題，方法是告知擴充功能產生器匯入一個 TextMate 主題檔案 (.tmTheme) 並將其封裝以供 VS Code 使用。或者，如果您已經下載了該主題，請將 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 啟動「擴充功能開發主機（Extension Development Host）」視窗。

在該視窗中，透過 檔案 (File) > 喜好設定 (Preferences) > 主題 (Theme) > 色彩主題 (Color Theme) 開啟色彩主題選擇器，您就可以在下拉選單中看到您的主題。使用上下箭頭鍵即可即時預覽您的主題。

select my theme

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

將主題發佈到擴充功能市集

如果您想與社群分享您的新主題，可以將其發佈到擴充功能市集（Extension Marketplace）。請使用 vsce 發佈工具來封裝您的主題並將其發佈到 VS Code 市集。

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

我們也提供了關於如何讓您的擴充功能在 VS Code 市集上看起來更專業的建議，請參閱市集呈現技巧（Marketplace Presentation Tips）。

新增色彩 ID

擴充功能也可以透過顏色貢獻點（color contribution point）來貢獻色彩 ID。這些顏色也會在 workbench.colorCustomizations 設定和色彩主題定義檔案中使用程式碼完成功能時出現。使用者可以在擴充功能貢獻索引標籤中查看擴充功能定義了哪些顏色。

進階閱讀

CSS Tricks - 建立 VS Code 主題

4/8/2026