🚀 在 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"
  }
}

此設定支援一個簡單的模型，其中提供一組常見的符記類型，例如「註解」、「字串」和「數字」。如果您想要為更多項目著色，您需要直接使用 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 市集。

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

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

新增色彩 ID

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

延伸閱讀

02/06/2025