將 Visual Studio 主題配色現代化

Visual Studio 主題過去依賴細緻且專屬的功能色彩標記。隨著時間推移，這種方式產生了數千種客製化面值與客製化色彩，使得一致性與可及性更難保證。為了解決這個問題，我們以明確的設計原則重新建構系統：減少語意標記以便維護，顏色漸層可預測以促進永續無障礙，並在 Visual Studio、Windows 平台及其他 Microsoft 工具中提供更統一的體驗。

本文說明了哪些主題改變了，以及如何遷移先前的主題以相容於 Visual Studio 2026。

變更了什麼

在 Visual Studio 2022 之前，開箱即用的 Visual Studio 主題包含約 34 個類別和 ~1,806 個顏色標記。延長後通常會增加更多。這種密度帶來了一些挑戰：

許多代幣幾乎相同，僅在色調或亮度上略有差異，導致視覺雜亂與混淆。
個別功能（如 CodeAnalysis、Diagnostics、ManifestDesigner 等）會產生獨特的標記，導致色彩使用分散且不一致。
由於自訂條目數量眾多，驗證色彩對比度以提升無障礙性相當具有挑戰性。
整體使用者體驗變得不一致，表面看起來不匹配或不同步。

以下是 Visual Studio 2022 主題中的類別與顏色標記範例：

<Theme ...>
...
<Category Name="CodeAnalysis" ...>
   <Color Name="RenameError">...</Color>
   <Color Name="RenameResolvableConflict">...</Color>
</Category>
<Category Name="Diagnostics"...>
...
   <Color Name="AdvancedListItemSelected">
      <Background ... />
      <Foreground ... />
   </Color>
   <Color Name="ButtonBackgroundDisabled">...</Color>
   <Color Name="ButtonBorderDisabled">
      <Background ... />
   </Color>
   <Color Name="ButtonTextDisabled">
      <Background ... />
   </Color>
...
</Category>
...
<!-- many more feature-scoped categories and hundreds of tokens -->
</Theme>

Visual Studio 2026 將代幣整合成幾個以意圖為先的類別，命名層級可預測。預設的介面主題現在只包含四個頂層類別和 229 個顏色標記（減少了約 87%）。

以下是 Visual Studio 2026 主題中語意優先的符號範例：

<Theme ...>
<Category Name="Shell">
...
   <Color Name="ControlFillSecondary"> ... </Color>
   <Color Name="TextFillPrimary"> ... </Color>
   <Color Name="SolidBackgroundFillBase"> ... </Color>
...
</Category>
</Theme>

為什麼少代幣能解鎖更好的使用者體驗

以意圖為優先的命名：樣式標記名稱清楚反映其角色（例如 ControlFill、TextFill、AccentFill、Stroke、SystemFill）及層級（主要、次要、第三級），使得使用更加直觀。
簡化調色盤： 更新一小組共享令牌，能立即提升 shell 與擴充套件間的一致性。
更穩定： 較少的自訂點數意味著意外不匹配的機率降低，並消除稍有差異的變體。
提升可及性： 集中式色彩斜坡與語意狀態（成功、謹慎、關鍵、注意力）使對比驗證更簡單且更可靠。
更佳的效能與可維護性： 語意層取代了細緻的色彩設定器，降低維護負擔並提升使用者介面品質。

將主題遷移到 Visual Studio 2026

你可以透過將現有的標記與一小組新的語意標記合併，讓先前的主題與 Visual Studio 2026 相容。你不需要重新建立所有之前的代幣。 Visual Studio 2026 會先讀取新的標記，然後再退回到之前的標記。方法如下：

在物件處FallbackId="{Light or Dark theme GUID}"新增<Theme />物件。

主題	備用ID
Light	{de3dbbcd-f642-433c-8353-8f1df4370aba}
暗	{1ded0138-47ce-435e-84ef-9ec1f439b749}

將以下代幣組合作為前一主題代幣後的最後兩個類別。請確保類別名稱和 GUID 完全照下列方式複製。

簡約代幣組的光線主題起始

<Theme Name="MyAwesomeLightTheme" ...>
<!-- existing theme categories here -->
<Category Name="Shell" GUID="{73708ded-2d56-4aad-b8eb-73b20d3f4bff}">
   <Color Name="AccentFillDefault">
      <Background Type="CT_RAW" Source="FF5649B0" />
   </Color>
   <Color Name="AccentFillSecondary">
      <Background Type="CT_RAW" Source="E55649B0" />
   </Color>
   <Color Name="AccentFillTertiary">
      <Background Type="CT_RAW" Source="CC5649B0" />
   </Color>
   <Color Name="SolidBackgroundFillTertiary">
      <Background Type="CT_RAW" Source="FFF9F9F9" />
   </Color>
   <Color Name="SolidBackgroundFillQuaternary">
      <Background Type="CT_RAW" Source="FFFFFFFF" />
   </Color>
   <Color Name="SurfaceBackgroundFillDefault">
      <Background Type="CT_RAW" Source="FFF9F9F9" />
   </Color>
   <Color Name="TextFillSecondary">
      <Background Type="CT_RAW" Source="9E000000" />
   </Color>
</Category>
<Category Name="ShellInternal" GUID="{5af241b7-5627-4d12-bfb1-2b67d11127d7}">
   <Color Name="EnvironmentBackground">
      <Background Type="CT_RAW" Source="FFEEEEEE" />
   </Color>
   <Color Name="EnvironmentBorder">
      <Background Type="CT_RAW" Source="FF5649B0" />
   </Color>
   <Color Name="EnvironmentIndicator">
      <Background Type="CT_RAW" Source="66757575" />
   </Color>
   <Color Name="EnvironmentLogo">
      <Background Type="CT_RAW" Source="FF5649B0" />
   </Color>
   <Color Name="EnvironmentLayeredBackground">
      <Background Type="CT_RAW" Source="80FFFFFF" />
   </Color>
</Category>
</Theme>

暗色主題的極簡代幣組起始版

<Theme Name="MyAwesomeDarkTheme" ...>
<!-- existing theme categories here -->
<Category Name="Shell" GUID="{73708ded-2d56-4aad-b8eb-73b20d3f4bff}">
   <Color Name="AccentFillDefault">
      <Background Type="CT_RAW" Source="FF9184EE" />
   </Color>
   <Color Name="AccentFillSecondary">
      <Background Type="CT_RAW" Source="80000000" />
   </Color>
   <Color Name="AccentFillTertiary">
      <Background Type="CT_RAW" Source="CC9184EE" />
   </Color>
   <Color Name="SolidBackgroundFillTertiary">
      <Background Type="CT_RAW" Source="FF282828" />
   </Color>
   <Color Name="SolidBackgroundFillQuaternary">
      <Background Type="CT_RAW" Source="FF2C2C2C" />
   </Color>
   <Color Name="SurfaceBackgroundFillDefault">
      <Background Type="CT_RAW" Source="FF2C2C2C" />
   </Color>
   <Color Name="TextFillSecondary">
      <Background Type="CT_RAW" Source="C8FFFFFF" />
   </Color>
</Category>
<Category Name="ShellInternal" GUID="{5af241b7-5627-4d12-bfb1-2b67d11127d7}">
   <Color Name="EnvironmentBackground">
      <Background Type="CT_RAW" Source="FF1C1C1C" />
   </Color>
   <Color Name="EnvironmentBorder">
      <Background Type="CT_RAW" Source="FF9184EE" />
   </Color>
   <Color Name="EnvironmentIndicator">
      <Background Type="CT_RAW" Source="66757575" />
   </Color>
   <Color Name="EnvironmentLogo">
      <Background Type="CT_RAW" Source="FF9184EE" />
   </Color>
   <Color Name="EnvironmentLayeredBackground">
      <Background Type="CT_RAW" Source="4D3A3A3A" />
   </Color>
</Category>
</Theme>

根據需要調整色彩值以符合前一個主題。

FAQ

為什麼這會成為一個突破性的改變？

除了主題顏色標記結構和命名規則的變更外，大部分 UI 程式碼已重構，改用 Fluent Design System 的語意樣式標記，取代先前的功能範圍標記或內嵌樣式。雖然大部分舊色彩及其他樣式資源仍保留在 SDK 中，但它們可能無法反映最新設計，或在現代化的使用者介面中表現不一致。

我可以繼續使用之前的代幣嗎？

先前的標記可能仍會解析某些較早的界面，但新的與重構的 UI 路徑會先讀取新的語義標記。如果你依賴已棄用的代幣，可能會出現主題不完整的問題。

經典的藍色主題在哪裡？

我們用一系列有色主題和額外對比度編輯器外觀選項來取代它。如果你想要更接近原作的致敬，也可以安裝藍鋼社群主題。

代幣變少是否代表自訂空間變少？

沒有語義層級的設計---讓你透過調整小調色盤來創造視覺的重大變化。你仍可透過點綴色調、背景亮度步驟和系統填充來塑造獨特的個性。

效能影響？

重構減少了樣式查找和冗餘資源，改善記憶體區域性，並簡化延遲筆刷的創建。

編輯器的顏色也會改變嗎？

編輯器目前保留大部分語法著色。此變更針對 shell UI 共享表面，如工具視窗、選單與對話框。你可以獨立選擇編輯器外觀（包括額外對比度）。

Last updated on 2025-11-20

共用方式為