佈景主題

色彩佈景主題

色彩佈景主題可讓您修改 Visual Studio Code 使用者介面中的色彩，以符合您的喜好設定和工作環境。色彩佈景主題會同時影響 VS Code 使用者介面元素和編輯器醒目提示色彩。

若要選取不同的色彩佈景主題

1. 選取 [檔案 > 喜好設定 > 佈景主題 > 色彩佈景主題] 功能表項目，或使用 [喜好設定：色彩佈景主題] 命令 (⌘K ⌘T (Windows、Linux Ctrl+K Ctrl+T)) 以顯示色彩佈景主題選擇器。

2. 使用 向上 和 向下 鍵瀏覽清單，並預覽佈景主題的色彩。

3. 選取您想要的佈景主題，然後按下 Enter 鍵。

使用中的色彩佈景主題會儲存在您的使用者設定中 (鍵盤快速鍵 ⌘, (Windows、Linux Ctrl+,))。

  // Specifies the color theme used in the workbench.
  "workbench.colorTheme": "Solarized Dark"

來自市集的色彩佈景主題

VS Code 中有數個現成的色彩佈景主題可供您試用。社群已將更多佈景主題上傳至 VS Code 擴充功能市集。

您可以直接從色彩佈景主題選擇器選取 VS Code 市集中的色彩佈景主題，方法是選取 [瀏覽其他色彩佈景主題...]。

或者，您也可以在 [擴充功能] 檢視 (⇧⌘X (Windows、Linux Ctrl+Shift+X)) 搜尋方塊中使用 @category:"themes" 篩選器來搜尋佈景主題。

根據 OS 色彩配置自動切換

Windows 和 macOS 支援淺色和深色色彩配置。有一個設定 window.autoDetectColorScheme，指示 VS Code 監聽 OS 色彩配置的變更，並據此切換為相符的佈景主題。

同樣地，您可以使用 window.autoDetectHighContrast 設定來自動偵測 OS 是否切換為高對比色彩配置。

若要自訂色彩配置變更時使用的佈景主題，您可以在 [設定] 編輯器中設定慣用的淺色、深色和高對比佈景主題

• 工作台：慣用深色色彩佈景主題 - 預設為深色現代
• 工作台：慣用淺色色彩佈景主題 - 預設為淺色現代
• 工作台：慣用高對比色彩佈景主題 - 預設為深色高對比
• 工作台：慣用高對比淺色色彩佈景主題 - 預設為淺色高對比

自訂色彩佈景主題

工作台色彩

您可以使用 workbench.colorCustomizations 和 editor.tokenColorCustomizations 使用者設定來自訂您的使用中色彩佈景主題。

若要設定 VS Code UI 元素 (例如清單與樹狀結構 (檔案總管、建議小工具)、差異編輯器、活動列、通知、捲軸、分割檢視、按鈕等等) 的色彩，請使用 workbench.colorCustomizations。

您可以在設定 workbench.colorCustomizations 值時使用 IntelliSense，或者如需所有可自訂色彩的清單，請參閱佈景主題色彩參考。

若要自訂特定佈景主題，請使用下列語法

"workbench.colorCustomizations": {
    "[Monokai]": {
        "sideBar.background": "#347890"
    }
}

如果自訂套用至多個佈景主題，您可以命名多個佈景主題，或在名稱的開頭和結尾使用 * 作為萬用字元

"workbench.colorCustomizations": {
    "[Abyss][Red]": {
        "activityBar.background": "#ff0000"
    },
    "[Monokai*]": {
        "activityBar.background": "#ff0000"
    }
}

如果佈景主題設定了您不喜歡的色彩或框線，您可以使用 default 將其設定回原始值

  "workbench.colorCustomizations": {
      "diffEditor.removedTextBorder": "default"
  }

編輯器語法醒目提示

若要調整編輯器的語法醒目提示色彩，請在您的使用者設定 settings.json 檔案中使用 editor.tokenColorCustomizations

預先設定的語法權杖集 (「註解」、「字串」...) 可用於最常見的建構。如果您想要更多，您可以直接指定 TextMate 佈景主題色彩規則來執行此作業

若要自訂特定佈景主題，您可以使用下列其中一種方式執行此作業

"editor.tokenColorCustomizations": {
    "[Monokai]": {
        "comments": "#229977"
    },
    "[*Dark*]": {
        "variables": "#229977"
    },
    "[Abyss][Red]": {
        "keywords": "#f00"
    }
}

編輯器語意醒目提示

某些語言 (目前：TypeScript、JavaScript、Java) 提供語意權杖。語意權杖是以語言服務的符號理解為基礎，而且比來自 TextMate 文法 (由規則運算式驅動) 的語法權杖更準確。從語意權杖計算出的語意醒目提示會覆蓋在語法醒目提示之上，而且可以更正和豐富醒目提示，如下列範例所示

沒有語意醒目提示的「Tomorrow Night Blue」色彩佈景主題

具有語意醒目提示的「Tomorrow Night Blue」色彩佈景主題

請注意根據語言服務符號理解的色彩差異

• 第 10 行：languageModes 色彩顯示為參數。
• 第 11 行：Range 和 Position 色彩顯示為類別，而 document 顯示為參數。
• 第 13 行：getFoldingRanges 色彩顯示為函式。

設定 editor.semanticHighlighting.enabled 可作為語意醒目提示是否套用的主要控制項。它可以有值 true、false 和 configuredByTheme。

• true 和 false 會針對所有佈景主題開啟或關閉語意醒目提示。
• configuredByTheme 是預設值，可讓每個佈景主題控制是否啟用語意醒目提示。VS Code 隨附的所有佈景主題 (例如「Dark+」預設佈景主題) 預設都會啟用語意醒目提示。

您可以透過下列方式覆寫佈景主題設定

"editor.semanticTokenColorCustomizations": {
    "[Rouge]": {
        "enabled": true
    }
}

當語意醒目提示已啟用且適用於語言時，佈景主題可以設定是否以及如何為語意權杖著色。某些語意權杖已標準化，並對應至完善的 TextMate 範圍。如果佈景主題具有這些 TextMate 範圍的著色規則，則會使用該色彩呈現語意權杖，而無需任何額外的著色規則。

可以在 editor.semanticTokenColorCustomizations" 中設定其他樣式規則

"editor.semanticTokenColorCustomizations": {
    "[Rouge]": {
        "enabled": true,
        "rules": {
            "*.declaration": { "bold": true }
        }
    }
}

若要查看計算出的語意權杖以及其樣式設定方式，您可以使用範圍檢查器 ([開發人員：檢查編輯器權杖和範圍])，它會顯示目前游標位置文字的相關資訊。

如果語意權杖適用於指定位置的語言，且佈景主題已啟用語意權杖，則檢查工具會顯示 [語意權杖類型] 區段。此區段會顯示語意權杖資訊 (類型和任何數量的修飾詞) 以及套用的樣式規則。

如需語意權杖和樣式規則語法的詳細資訊，請參閱語意醒目提示指南。

建立您自己的色彩佈景主題

建立和發佈佈景主題擴充功能很容易。在您的使用者設定中自訂您的色彩，然後使用 [開發人員：從目前的設定產生色彩佈景主題] 命令產生佈景主題定義檔。

VS Code 的 Yeoman 擴充功能產生器可協助您產生擴充功能的其餘部分。

請參閱我們擴充功能 API 區段中的建立新的色彩佈景主題文章以深入了解。

移除預設色彩佈景主題

如果您想要從色彩佈景主題選擇器中移除 VS Code 隨附的某些預設佈景主題，您可以從 [擴充功能] 檢視 (⇧⌘X (Windows、Linux Ctrl+Shift+X)) 停用它們。從 [擴充功能] 檢視頂端選取 [篩選擴充功能] 按鈕，選取 [內建] 選項，您會看到 [佈景主題] 區段，其中列出預設佈景主題。

您可以停用內建佈景主題擴充功能，就像您對任何其他 VS Code 擴充功能執行 [齒輪] 內容功能表上的 [停用] 命令一樣。

檔案圖示佈景主題

檔案圖示表示特定的檔案類型。這些圖示會與 [檔案總管] 檢視和索引標籤標題中的檔案名稱一起顯示。檔案圖示佈景主題可以由擴充功能貢獻。

若要選取不同的檔案圖示佈景主題

1. 選取 [檔案 > 喜好設定 > 佈景主題 > 檔案圖示佈景主題] 功能表項目，或使用 [喜好設定：檔案圖示佈景主題] 命令以顯示檔案圖示佈景主題選擇器。

2. 使用 向上 和 向下 鍵瀏覽清單，並預覽佈景主題的圖示。

3. 選取您想要的佈景主題，然後按下 Enter 鍵。

根據預設，會使用 Seti 檔案圖示佈景主題，而這些是您在 [檔案總管] 檢視中看到的圖示。VS Code 會在重新啟動後記住您的檔案圖示佈景主題選取項目。您可以選取 [無] 來停用檔案圖示。

VS Code 隨附兩個檔案圖示佈景主題：[Minimal] 和 [Seti]。若要安裝更多檔案圖示佈景主題，請在檔案圖示佈景主題選擇器中選取 [安裝其他檔案圖示佈景主題] 項目，這會開啟 [擴充功能] 檢視，並依圖示佈景主題篩選。

您也可以直接瀏覽 VS Code 市集網站，以尋找可用的佈景主題。

使用中的檔案圖示佈景主題會保存在您的使用者設定中 (鍵盤快速鍵 ⌘, (Windows、Linux Ctrl+,))。

  // Specifies the file icon theme used in the workbench.
  "workbench.iconTheme": "vs-seti"

建立您自己的檔案圖示佈景主題

您可以使用圖示 (最好是 SVG) 建立自己的檔案圖示佈景主題，請參閱我們擴充功能 API 區段中的檔案圖示佈景主題文章以取得詳細資訊。

VS Code 網頁版

VS Code 網頁版提供免費、零安裝的 VS Code 體驗，完全在您的瀏覽器中執行，網址為 https://vscode.dev。

您可以透過 VS Code 網頁版，透過 URL 結構描述分享和體驗色彩佈景主題：https://vscode.dev/editor/theme/<extensionId>。

例如，您可以前往 https://vscode.dev/editor/theme/sdras.night-owl 來體驗 Night Owl 佈景主題，而無需經歷下載和安裝程序。

您可以在VS Code 網頁版文件中深入了解預覽和分享佈景主題。

產品圖示佈景主題

產品圖示佈景主題可讓您變更 VS Code 使用者介面中的圖示，檔案類型特定圖示除外。例如，您可以修改活動列中檢視的圖示，或標題列中用於變更版面配置的圖示。

請注意，在下列影像中，當選取不同的產品圖示佈景主題時，活動列圖示會如何更新。

若要選取不同的產品圖示佈景主題

1. 選取 [檔案 > 喜好設定 > 佈景主題 > 產品圖示佈景主題] 功能表項目，或使用 [喜好設定：產品圖示佈景主題] 命令以顯示產品圖示佈景主題選擇器。

2. 使用 向上 和 向下 鍵瀏覽清單，並預覽佈景主題的圖示。

3. 選取您想要的佈景主題，然後按下 Enter 鍵。

根據預設，VS Code 隨附一個產品圖示佈景主題，[預設]。您可以直接從產品圖示佈景主題選擇器選取 VS Code 市集中更多產品圖示佈景主題，方法是選取 [瀏覽其他產品圖示佈景主題...]。

後續步驟

佈景主題只是自訂 VS Code 的其中一種方式。如果您想要深入了解 VS Code 自訂和擴充性，請試用下列文章

• 設定 - 了解如何透過使用者和工作區設定，將 VS Code 設定為符合您的喜好設定。
• 程式碼片段 - 將額外的程式碼片段新增至您慣用的語言。
• 擴充功能 API - 了解擴充 VS Code 的其他方式。
• 色彩佈景主題 - 色彩佈景主題擴充功能 API。
• 檔案圖示佈景主題 - 檔案圖示佈景主題擴充功能 API。