主題
顏色主題
顏色主題使您可以修改 Visual Studio Code 使用者介面的顏色，以匹配您的偏好和工作環境。顏色主題會影響 VS Code 使用者介面元素和編輯器的高亮顯示顏色。
選擇其他顏色主題
-
選擇 檔案 > 首選項 > 主題 > 顏色主題 選單項，或使用 首選項：顏色主題 命令（⌘K ⌘T (Windows、Linux Ctrl+K Ctrl+T)）來顯示顏色主題選擇器。
-
使用 向上 和 向下 鍵瀏覽列表並預覽主題的顏色。
-
選擇您想要的主題，然後按 回車鍵。
當前活動的顏色主題儲存在您的使用者 設定 中（快捷鍵 ⌘, (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 設定來自動檢測作業系統是否已切換到高對比度顏色方案。
要自定義顏色方案更改時使用的主題，可以在設定編輯器中設定首選的深色、淺色和高對比度主題
- 工作區：首選深色主題 - 預設為 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。
最常見的構造（“註釋”、“字串”等）已提供預配置的語法令牌集。如果您需要更多，可以透過直接指定 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 擴充套件 一樣，透過齒輪上下文選單中的 停用 命令來停用內建主題擴充套件。
檔案圖示主題
檔案圖示指示特定檔案型別。這些圖示會顯示在資源管理器檢視和選項卡標題中的檔名旁邊。檔案圖示主題可以由擴充套件貢獻。
選擇其他檔案圖示主題
-
選擇 檔案 > 首選項 > 主題 > 檔案圖示主題 選單項，或使用 首選項：檔案圖示主題 命令來顯示檔案圖示主題選擇器。
-
使用 向上 和 向下 鍵瀏覽列表並預覽主題的圖示。
-
選擇您想要的主題，然後按 回車鍵。
預設情況下，使用 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 部分的 檔案圖示主題 文章以獲取詳細資訊。
Web 版 VS Code
VS Code for the Web 提供了一個免費、無需安裝的 VS Code 體驗，完全在您的瀏覽器中執行，網址為 https://vscode.dev。
您可以透過 URL 方案共享和體驗 VS Code for the Web 中的顏色主題：https://vscode.dev/editor/theme/<extensionId>。
例如，您可以訪問 https://vscode.dev/editor/theme/sdras.night-owl 來體驗 Night Owl 主題，而無需進行下載和安裝過程。
您可以在 VS Code for the Web 文件 中瞭解有關預覽和共享主題的更多資訊。
產品圖示主題
產品圖示主題使您能夠更改 VS Code 使用者介面中的圖示，但特定檔案型別除外。例如，您可以修改活動欄中檢視的圖示，或者標題欄中用於更改佈局的圖示。
注意，在下面的影像中，選擇不同的產品圖示主題時，活動欄圖示會如何更新。
選擇其他產品圖示主題
-
選擇 檔案 > 首選項 > 主題 > 產品圖示主題 選單項，或使用 首選項：產品圖示主題 命令來顯示產品圖示主題選擇器。
-
使用 向上 和 向下 鍵瀏覽列表並預覽主題的圖示。
-
選擇您想要的主題，然後按 回車鍵。
預設情況下，VS Code 提供一個產品圖示主題：Default。您可以透過在產品圖示主題選擇器中選擇 瀏覽更多產品圖示主題...，直接從 VS Code 市場中選擇更多產品圖示主題。
後續步驟
主題只是自定義 VS Code 的一種方式。如果您想了解更多關於 VS Code 自定義和擴充套件性的資訊，請嘗試閱讀以下文章