更新 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 将令牌整合到少数几个意图优先的类别中，并使用可预测的命名层级。现成的 shell 主题现在仅包含四个顶级类别和 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 和扩展之间的一致性。
更高的一致性： 减少自定义点意味着意外不匹配次数减少，并消除略有不同的变体。
改进了无障碍功能： 集中式色阶和语义状态（成功、警示、严重、注意）使对比度验证更加简单和可靠。
更好的性能和可维护性： 语义层取代精细颜色设置器，减少维护开销并提高 UI 质量。

将主题迁移到 Visual Studio 2026

可以通过将其现有令牌合并为一组新的语义令牌，使以前的主题与 Visual Studio 2026 兼容。无需重新创建每个以前的令牌。 Visual Studio 2026 先读取新令牌，然后回退到以前的令牌。下面是作方法：

在 FallbackId="{Light or Dark theme GUID}" 对象中添加 <Theme /> 对象。

要基于的主题	FallbackId
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 中一致的行为。

是否可以继续使用以前的令牌？

以前的令牌可能仍会对某些早期界面进行解析，但新的和重构的 UI 路径会优先读取新的语义令牌。如果依赖于已弃用的令牌，则存在主题配置不完整的风险。

经典蓝色主题在哪里？

我们用一系列彩色主题和增强对比度的编辑器外观选项来替换它。如果想要更贴近的致敬，还可以安装社区蓝钢主题。

令牌的减少是否意味着自定义更少？

语义层允许你通过调整小型调色板来产生大范围的视觉变化。你仍然可以通过突出色调、背景亮度级别和系统填充来创造不同的风格。

性能影响？

重构减少了样式查找和冗余资源，提升了内存局部性，并简化了延迟画笔的创建。

编辑器颜色是否也会更改？

编辑器当前保留大部分语法着色。此更改面向 shell UI 共享图面，例如工具窗口、菜单和对话框。可以独立选择编辑器外观（包括额外对比度）。

Last updated on 2025-11-20

通过