佈景主題

色彩佈景主題

色彩佈景主題讓您可以修改 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" 來搜尋佈景主題。

根據作業系統色彩配置自動切換

Windows 和 macOS 支援淺色和深色色彩配置。有一個設定， window.autoDetectColorScheme Open in VS Code Open in VS Code Insiders ，會指示 VS Code 監聽作業系統色彩配置的變更，並據此切換到相符的佈景主題。

同樣地，您可以使用 window.autoDetectHighContrast Open in VS Code Open in VS Code Insiders 設定來自動偵測作業系統是否切換到高對比色彩配置。

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

• 工作台：偏好深色色彩佈景主題 - 預設為 Dark Modern
• 工作台：偏好淺色色彩佈景主題 - 預設為 Light Modern
• 工作台：偏好高對比色彩佈景主題 - 預設為 Dark High Contrast
• 工作台：偏好淺色高對比色彩佈景主題 - 預設為 Light High Contrast

自訂色彩佈景主題

工作台色彩

您可以使用 workbench.colorCustomizations Open in VS Code Open in VS Code Insiders 和 editor.tokenColorCustomizations Open in VS Code Open in VS Code Insiders 使用者設定來自訂目前使用的色彩佈景主題。

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

您可以在設定 workbench.colorCustomizations Open in VS Code Open in VS Code Insiders 值時使用 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 Open in VS Code Open in VS Code Insiders 。

對於最常見的結構，有一組預先設定的語法權杖 ('comments', 'strings', ...) 可供使用。如果您需要更多，可以透過直接指定 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 Open in VS Code Open in VS Code Insiders 作為控制語意高亮顯示是否套用的主要開關。它可以有 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 for the Web 提供免費、零安裝的 VS Code 體驗，完全在您的瀏覽器中執行，網址為 https://vscode.dev。

您可以透過 VS Code for the Web 並使用 URL 配置來分享和體驗色彩佈景主題：https://vscode.dev/editor/theme/<extensionId>。

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

您可以在VS Code for the Web 文件中了解更多關於預覽和分享佈景主題的資訊。

產品圖示佈景主題

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

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

選擇不同的產品圖示佈景主題

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

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

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

預設情況下，VS Code 隨附一個產品圖示佈景主題：「預設 (Default)」。您可以透過在產品圖示佈景主題選擇器中選取「瀏覽額外產品圖示佈景主題...」，直接從 VS Code 市集選擇更多產品圖示佈景主題。

後續步驟

佈景主題只是自訂 VS Code 的其中一種方式。如果您想了解更多關於 VS Code 自訂和擴充功能的資訊，請參考這些文章

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