🚀 在 VS Code 中！

色彩主題

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 微調了主題色彩，就可以建立實際的主題了。

  1. 使用開發人員：從目前設定產生色彩主題命令，從命令面板產生主題檔案

  2. 使用 VS Code 的 Yeoman 擴充功能產生器來產生新的主題擴充功能

    npm install -g yo generator-code
yo code

  3. 如果您如上所述自訂了主題，請選取 '從頭開始'。

    yo code theme

  4. 將從您的設定產生的主題檔案複製到新的擴充功能。

您也可以使用現有的 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 啟動擴充功能開發主機視窗。

在那裡，使用 檔案 > 喜好設定 > 主題 > 色彩主題 開啟色彩主題選取器，您可以在下拉式清單中看到您的主題。使用向上和向下箭頭查看主題的即時預覽。

select my theme

對主題檔案的變更會即時套用在 擴充功能開發主機 視窗中。

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

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

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

我們也對如何讓您的擴充功能在 VS Code 市集上看起來更棒有建議，請參閱市集呈現技巧。

新增色彩 ID

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

延伸閱讀

04/03/2025