佈景主題
色彩佈景主題
色彩佈景主題可讓您修改 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"
提示： 依預設，佈景主題會儲存在您的使用者設定中，並全域套用至所有工作區。您也可以設定工作區特定的佈景主題。若要執行此操作，請在工作區設定中設定佈景主題。
來自市集的色彩佈景主題
VS Code 中有幾個現成的色彩佈景主題可供您試用。社群已將更多佈景主題上傳至 VS Code 擴充功能市集。
您可以直接從色彩佈景主題選擇器選取瀏覽其他色彩佈景主題...，從 VS Code 市集選取色彩佈景主題。
或者，您也可以使用 @category:"themes" 篩選條件，在擴充功能檢視 (⇧⌘X (Windows、Linux Ctrl+Shift+X)) 搜尋方塊中搜尋佈景主題。
根據作業系統色彩配置自動切換
Windows 和 macOS 支援淺色和深色色彩配置。有一個設定 window.autoDetectColorScheme，指示 VS Code 監聽作業系統色彩配置的變更，並據此切換至相符的佈景主題。
同樣地，您可以使用 window.autoDetectHighContrast 設定，自動偵測作業系統是否切換至高對比色彩配置。
若要自訂色彩配置變更時使用的佈景主題，您可以在設定編輯器中設定偏好的淺色、深色和高對比佈景主題
- 工作台：偏好的深色色彩佈景主題 - 預設為「深色現代」
- 工作台：偏好的淺色色彩佈景主題 - 預設為「淺色現代」
- 工作台：偏好的高對比色彩佈景主題 - 預設為「深色高對比」
- 工作台：偏好的淺色高對比色彩佈景主題 - 預設為「淺色高對比」
自訂色彩佈景主題
工作台色彩
您可以使用 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
預先設定的語法權杖集 (「comments」、「strings」等) 可用於最常見的建構。如果您想要更多，您可以透過直接指定 TextMate 佈景主題色彩規則來執行此操作
注意：直接設定 TextMate 規則是一項進階技能，因為您需要了解 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 擴充功能 使用齒輪操作功能表上的 停用 命令一樣。
檔案圖示佈景主題
檔案圖示表示特定的檔案類型。這些圖示會與檔案名稱一起顯示在檔案總管檢視和索引標籤標題中。檔案圖示佈景主題可以由擴充功能貢獻。
若要選取不同的檔案圖示佈景主題
-
選取 檔案 > 喜好設定 > 佈景主題 > 檔案圖示佈景主題 功能表項目，或使用 喜好設定：檔案圖示佈景主題 命令以顯示檔案圖示佈景主題選擇器。
-
使用 向上 和 向下 鍵在清單中瀏覽，並預覽佈景主題的圖示。
-
選取您想要的佈景主題，然後按下 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。
您可以透過 URL 結構描述：https://vscode.dev/editor/theme/<extensionId>，透過適用於網頁的 VS Code 分享和體驗色彩佈景主題。
例如，您可以前往 https://vscode.dev/editor/theme/sdras.night-owl，體驗 Night Owl 佈景主題，而無需經歷下載和安裝程序。
您可以在 適用於網頁的 VS Code 文件中深入了解預覽和分享佈景主題。
產品圖示佈景主題
產品圖示佈景主題可讓您變更 VS Code 使用者介面中的圖示，檔案類型特定圖示除外。例如，您可以修改活動列中檢視的圖示，或標題列中用於變更版面配置的圖示。
請注意，在下列影像中，當選取不同的產品圖示佈景主題時，活動列圖示會如何更新。
若要選取不同的產品圖示佈景主題
-
選取 檔案 > 喜好設定 > 佈景主題 > 產品圖示佈景主題 功能表項目，或使用 喜好設定：產品圖示佈景主題 命令以顯示產品圖示佈景主題選擇器。
-
使用 向上 和 向下 鍵在清單中瀏覽，並預覽佈景主題的圖示。
-
選取您想要的佈景主題，然後按下 Enter。
依預設，VS Code 隨附一個產品圖示佈景主題，預設。您可以直接從產品圖示佈景主題選擇器選取瀏覽其他產品圖示佈景主題...，從 VS Code 市集選取更多產品圖示佈景主題。
後續步驟
佈景主題只是自訂 VS Code 的一種方式。如果您想深入了解 VS Code 自訂和擴充性，請試用下列文章