佈景主題
色彩佈景主題
色彩佈景主題讓您可以修改 Visual Studio Code 使用者介面中的色彩，以符合您的偏好與工作環境。色彩佈景主題同時會影響 VS Code 使用者介面元素以及編輯器的反白顯示色彩。
若要選取不同的色彩佈景主題
-
選取 檔案 > 喜好設定 > 佈景主題 > 色彩佈景主題 選單項目，或使用 喜好設定: 色彩佈景主題 指令 (⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T)) 來顯示色彩佈景主題挑選器。
-
使用 向上 和 向下 鍵瀏覽清單，並預覽該佈景主題的色彩。
-
選取您想要的佈景主題並按下 Enter。
作用中的色彩佈景主題會儲存在您的使用者 設定 中 (鍵盤快速鍵 ⌘, (Windows, Linux Ctrl+,))。
// Specifies the color theme used in the workbench.
"workbench.colorTheme": "Solarized Dark"
來自市集 (Marketplace) 的色彩佈景主題
VS Code 提供多種內建色彩佈景主題供您嘗試。社群已將更多佈景主題上傳至 VS Code 延伸模組市集。
您可以直接在色彩佈景主題挑選器中選取 瀏覽其他色彩佈景主題...，以選擇 VS Code 市集中的色彩佈景主題。
或者，您可以使用 @category:"themes" 篩選器，在延伸模組檢視 (⇧⌘X (Windows, Linux Ctrl+Shift+X)) 的搜尋方塊中搜尋佈景主題。
根據作業系統色彩配置自動切換
Windows 和 macOS 支援淺色與深色色彩配置。有一個設定 window.autoDetectColorScheme ，它會指示 VS Code 監聽作業系統色彩配置的變更，並隨之切換至匹配的佈景主題。
同樣地，您可以使用 window.autoDetectHighContrast 設定，來自動偵測作業系統是否切換為高對比色彩配置。
若要自訂在色彩配置變更時使用的佈景主題，您可以在設定編輯器中設定偏好的淺色、深色及高對比佈景主題。
- 工作台: 偏好的深色色彩佈景主題 - 預設為 Dark Modern
- 工作台: 偏好的淺色色彩佈景主題 - 預設為 Light Modern
- 工作台: 偏好的高對比色彩佈景主題 - 預設為 Dark High Contrast
- 工作台: 偏好的高對比淺色色彩佈景主題 - 預設為 Light High Contrast
自訂色彩佈景主題
工作台色彩
您可以使用使用者 設定 中的 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
針對最常見的建構，已提供一組預先設定的語法 Token（'註解'、'字串' 等）。如果您需要更多，可以直接指定 TextMate 佈景主題色彩規則來達成
直接設定 TextMate 規則是一項進階技能，因為您需要了解 TextMate 文法是如何運作的。請前往 色彩佈景主題指南 以取得更多資訊。
若要自訂特定佈景主題，您可以採用下列其中一種方式
"editor.tokenColorCustomizations": {
"[Monokai]": {
"comments": "#229977"
},
"[*Dark*]": {
"variables": "#229977"
},
"[Abyss][Red]": {
"keywords": "#f00"
}
}
編輯器語意反白顯示
某些語言（目前為：TypeScript、JavaScript、Java）提供語意 Token。語意 Token 基於語言服務對符號的理解，比由正規表示式驅動的 TextMate 文法所產生的語法 Token 更為精確。由語意 Token 計算出的語意反白顯示會疊加在語法反白顯示之上，並可修正與豐富反白顯示效果，如下列範例所示
未啟用語意反白顯示的「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
}
}
當語意反白顯示啟用且適用於某種語言時，由佈景主題決定是否以及如何為語意 Token 上色。某些語意 Token 已標準化，並對應至既有的 TextMate 範圍。如果佈景主題針對這些 TextMate 範圍有上色規則，則語意 Token 會以該色彩呈現，無需任何額外的上色規則。
額外的樣式規則可以在 editor.semanticTokenColorCustomizations" 中設定
"editor.semanticTokenColorCustomizations": {
"[Rouge]": {
"enabled": true,
"rules": {
"*.declaration": { "bold": true }
}
}
}
若要查看計算出的語意 Token 及其樣式，您可以使用範圍偵測器 (開發人員: 檢查編輯器 Token 與範圍)，它會顯示目前游標位置文字的相關資訊。
如果該語言在給定位置有可用的語意 Token 且佈景主題已啟用，則偵測工具會顯示一個 語意 Token 類型 區段。該區段會顯示語意 Token 資訊（類型與任何數量的修飾詞）以及適用的樣式規則。
關於語意 Token 和樣式規則語法的更多資訊，可以在 語意反白顯示指南 中找到。
建立您自己的色彩佈景主題
建立並發佈佈景主題延伸模組很簡單。在使用者設定中自訂您的色彩，然後使用 開發人員: 從目前設定產生色彩佈景主題 指令來產生佈景主題定義檔案。
VS Code 的 Yeoman 延伸模組產生器 可協助您產生延伸模組的其餘部分。
請參閱我們延伸模組 API 區段中的 建立新的色彩佈景主題 文章以了解更多資訊。
移除預設的色彩佈景主題
如果您想從色彩佈景主題挑選器中移除 VS Code 附帶的部分預設佈景主題，您可以從延伸模組檢視 (⇧⌘X (Windows, Linux Ctrl+Shift+X)) 停用它們。從延伸模組檢視頂端選取 篩選延伸模組 按鈕，選取 內建 選項，您就會看到一個列出預設佈景主題的 佈景主題 區段。
您可以像停用任何其他 VS Code 延伸模組 一樣，透過齒輪內容選單中的 停用 指令來停用內建佈景主題延伸模組。
檔案圖示佈景主題
檔案圖示用於標示特定的檔案類型。這些圖示會顯示在檔案總管檢視中的檔案名稱旁邊以及索引標籤標題中。檔案圖示佈景主題可由延伸模組提供。
若要選取不同的檔案圖示佈景主題
-
選取 檔案 > 喜好設定 > 佈景主題 > 檔案圖示佈景主題 選單項目，或使用 喜好設定: 檔案圖示佈景主題 指令來顯示檔案圖示佈景主題挑選器。
-
使用 向上 和 向下 鍵瀏覽清單，並預覽該佈景主題的圖示。
-
選取您想要的佈景主題並按下 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
Web 版 VS Code 在 https://vscode.dev 提供完全在瀏覽器中執行的免費、免安裝 VS Code 體驗。
您可以透過網址格式：https://vscode.dev/editor/theme/<extensionId> 分享並體驗 VS Code Web 中的色彩佈景主題。
例如，您可以前往 https://vscode.dev/editor/theme/sdras.night-owl 來體驗 Night Owl 佈景主題，無需經歷下載與安裝過程。
您可以在 Web 版 VS Code 文件 中了解更多關於預覽與分享佈景主題的資訊。
產品圖示佈景主題
產品圖示佈景主題讓您可以變更 VS Code 使用者介面中的圖示，而不僅限於特定檔案類型的圖示。例如，您可以修改活動列中檢視的圖示，或標題列中用於變更版面的圖示。
請注意下圖中，在選取不同的產品圖示佈景主題後，活動列圖示是如何更新的。
若要選取不同的產品圖示佈景主題
-
選取 檔案 > 喜好設定 > 佈景主題 > 產品圖示佈景主題 選單項目，或使用 喜好設定: 產品圖示佈景主題 指令來顯示產品圖示佈景主題挑選器。
-
使用 向上 和 向下 鍵瀏覽清單，並預覽該佈景主題的圖示。
-
選取您想要的佈景主題並按下 Enter。
預設情況下，VS Code 隨附一個產品圖示佈景主題：預設 (Default)。您可以直接在產品圖示佈景主題挑選器中選取 瀏覽其他產品圖示佈景主題...，以選擇更多產品圖示佈景主題。
後續步驟
佈景主題只是自訂 VS Code 的其中一種方式。如果您想了解更多關於 VS Code 的自訂與擴充能力，請參考以下文章
- 設定 - 了解如何透過使用者與工作區設定，依照您的偏好來設定 VS Code。
- 程式碼片段 (Snippets) - 為您常用的語言新增額外的程式碼片段。
- 延伸模組 API - 了解擴充 VS Code 的其他方式。
- 色彩佈景主題 - 色彩佈景主題延伸模組 API。
- 檔案圖示佈景主題 - 檔案圖示佈景主題延伸模組 API。