主題
顏色主題
顏色主題可讓你修改 Visual Studio Code 使用者介面中的顏色，以匹配你的偏好和工作環境。顏色主題會同時影響 VS Code 的使用者介面元素和編輯器的語法高亮顏色。
選擇不同的顏色主題
-
選擇 檔案 > 首選項 > 主題 > 顏色主題 選單項，或使用 首選項: 顏色主題 命令 (⌘K ⌘T (Windows、Linux 為 Ctrl+K Ctrl+T)) 來顯示顏色主題選擇器。
-
使用 Up 和 Down 鍵在列表中導航並預覽主題的顏色。
-
選擇你想要的主題，然後按 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，它會指示 VS Code 監聽作業系統顏色方案的變化，並相應地切換到匹配的主題。
同樣，你可以使用 window.autoDetectHighContrast 設定來自動檢測作業系統是否切換到了高對比度顏色方案。
要自定義顏色方案變化時使用的主題，你可以在設定編輯器中設定首選的淺色、深色和高對比度主題：
- Workbench: Preferred Dark Color Theme - 預設為 Dark Modern
- Workbench: Preferred Light Color Theme - 預設為 Light Modern
- Workbench: Preferred High Contrast Color Theme - 預設為 Dark High Contrast
- Workbench: Preferred High Contrast Light Color Theme - 預設為 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。
對於最常見的構造，提供了一組預配置的語法令牌（'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 }
}
}
}
要檢視計算出了哪些語義令牌以及它們的樣式，你可以使用作用域檢查器（Developer: Inspect Editor Tokens and Scopes），它會顯示當前游標位置文字的資訊。
如果給定位置的語言有可用的語義令牌，並且主題已啟用該功能，檢查工具會顯示一個 semantic token type 部分。該部分顯示語義令牌資訊（型別和任意數量的修飾符）以及應用的樣式規則。
有關語義令牌和樣式規則語法的更多資訊，可以在語義高亮指南中找到。
建立你自己的顏色主題
建立和釋出主題擴充套件非常簡單。在你的使用者設定中自定義顏色，然後使用 Developer: Generate Color Theme From Current Settings 命令生成一個主題定義檔案。
VS Code 的 Yeoman 擴充套件生成器可以幫助你生成擴充套件的其餘部分。
請參閱我們擴充套件 API 部分中的建立新的顏色主題一文以瞭解更多資訊。
移除預設顏色主題
如果你想從顏色主題選擇器中移除一些 VS Code 自帶的預設主題，你可以在擴充套件檢視（⇧⌘X (Windows、Linux 為 Ctrl+Shift+X)）中停用它們。選擇擴充套件檢視頂部的篩選擴充套件按鈕，選擇內建選項，你將看到一個 THEMES 部分，其中列出了預設主題。
你可以像停用任何其他 VS Code 擴充套件一樣，透過齒輪上下文選單中的停用命令來停用內建主題擴充套件。
檔案圖示主題
檔案圖示指示特定的檔案型別。這些圖示會顯示在資源管理器檢視中的檔名旁邊以及選項卡標題中。檔案圖示主題可以由擴充套件提供。
選擇不同的檔案圖示主題
-
選擇 檔案 > 首選項 > 主題 > 檔案圖示主題 選單項，或使用 首選項: 檔案圖示主題 命令來顯示檔案圖示主題選擇器。
-
使用 Up 和 Down 鍵在列表中導航並預覽主題的圖示。
-
選擇你想要的主題，然後按 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 部分中的檔案圖示主題一文。
Web 版 VS Code
VS Code for the Web 在 https://vscode.dev 提供了一個免費、免安裝、完全在瀏覽器中執行的 VS Code 體驗。
你可以透過 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 使用者介面中的圖示，但不包括特定檔案型別的圖示。例如，你可以修改活動欄中檢視的圖示，或者標題欄中用於更改佈局的圖示。
請注意在下圖中，當選擇不同的產品圖示主題時，活動欄圖示是如何更新的。
選擇不同的產品圖示主題
-
選擇 檔案 > 首選項 > 主題 > 產品圖示主題 選單項，或使用 首選項: 產品圖示主題 命令來顯示產品圖示主題選擇器。
-
使用 Up 和 Down 鍵在列表中導航並預覽主題的圖示。
-
選擇你想要的主題，然後按 Enter 鍵。
預設情況下，VS Code 自帶一個產品圖示主題：Default。你可以透過在產品圖示主題選擇器中選擇瀏覽其他產品圖示主題...，直接從 VS Code 應用市場中選擇更多的產品圖示主題。
後續步驟
主題只是自定義 VS Code 的一種方式。如果你想了解更多關於 VS Code 的自定義和可擴充套件性，可以試試這些文章：