Modernizar as cores do tema Visual Studio

Os temas do Visual Studio dependiam anteriormente de tokens de cor granulares e específicos de funcionalidades. Com o tempo, esta abordagem produziu milhares de valores personalizados e cores personalizadas, tornando a consistência e acessibilidade mais difíceis de garantir. Para resolver isto, reconstruímos o sistema com base em princípios claros de design: menos tokens semânticos para facilitar a manutenção, rampas de cor previsíveis para acessibilidade sustentável e uma experiência mais coesa no Visual Studio, na plataforma Windows e noutras ferramentas da Microsoft.

Este artigo explica o que mudou e como migrar temas anteriores para serem compatíveis com o Visual Studio 2026.

O que mudou

Antes do Visual Studio 2022, um tema Visual Studio pronto para uso incluía cerca de 34 categorias e ~1.806 tokens de cor. As extensões frequentemente acrescentavam mais. Esta densidade criou alguns desafios:

Muitos tokens eram quase idênticos, variando apenas ligeiramente em tom ou brilho, o que levava a confusão e sobrecarga visual.
Funcionalidades individuais (como CodeAnalysis, Diagnostics, ManifestDesigner, etc.) criavam os seus próprios tokens únicos, resultando numa utilização fragmentada e inconsistente de cores.
Verificar o contraste de cores para acessibilidade foi um desafio devido ao grande número de entradas personalizadas.
A experiência geral do utilizador tornou-se inconsistente, com superfícies a parecerem desalinhadas ou fora de sincronização.

Aqui está um exemplo de categorias e tokens de cor de um tema do 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>

O Visual Studio 2026 consolida os tokens em algumas categorias centradas na intenção, com níveis de nomeação previsíveis. Um tema de shell pronto para uso contém agora apenas quatro categorias de topo e 229 fichas de cor — uma redução de ~87%.

Aqui está um exemplo de tokens semânticos, com intenção em primeiro lugar, de um tema do Visual Studio 2026:

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

Por que menos tokens desbloqueiam melhor experiência de utilizador

Nomeação com intenção em primeiro lugar: Os nomes dos tokens refletem claramente o seu papel (por exemplo, ControlFill, TextFill, AccentFill, Stroke, SystemFill) e nível (Primário, Secundário, Terciário), tornando o uso intuitivo.
Paleta simplificada: Atualizar um pequeno conjunto de tokens partilhados melhora instantaneamente a consistência tanto no shell como nas extensões.
Maior consistência: Menos pontos de personalização significam menos desvantagens acidentais e eliminam variantes ligeiramente diferentes.
Acessibilidade melhorada: Rampas de cor centralizadas e estados semânticos (Sucesso, Cuidado, Crítico, Atenção) tornam a validação do contraste mais fácil e fiável.
Melhor desempenho e manutenção: As camadas semânticas substituem os ajustadores granulares de cor, reduzindo a sobrecarga de manutenção e melhorando a qualidade da interface.

Migrar temas para Visual Studio 2026

Pode tornar um tema anterior compatível com o Visual Studio 2026 fundindo os seus tokens existentes com um pequeno conjunto de novos tokens semânticos. Não precisa de recriar todos os tokens anteriores. O Visual Studio 2026 lê primeiro os novos tokens e depois volta aos tokens anteriores. Aqui está como:

Adicionar FallbackId="{Light or Dark theme GUID}" objeto no <Theme /> objeto.

Tema a basear	FallbackId
Light	{de3dbbcd-f642-433c-8353-8f1df4370aba}
Dark	{1DED0138-47CE-435E-84EF-9EC1F439B749}

Adicione o conjunto abaixo de tokens como as duas últimas categorias após os tokens do tema anterior. Certifique-se de que o nome da categoria e o GUID são copiados exatamente como abaixo.

Conjunto mínimo de tokens inicial para um tema baseado em luz

<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>

Conjunto mínimo de tokens iniciais para um tema baseado nas trevas

<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>

Ajusta os valores de cor para se ajustarem ao tema anterior conforme necessário.

FAQ

Porque é que isto foi uma mudança radical?

Para além das alterações na estrutura dos tokens de cor do tema e nas convenções de nomenclatura, a maior parte do código da interface do utilizador foi refatorada para utilizar tokens de estilo semântico do Fluent Design System, em vez dos tokens anteriores com âmbito de funcionalidades ou estilos embutidos. Embora a maioria dos antigos recursos de cor e outros recursos de estilo permaneçam presentes no SDK, podem não refletir o design mais recente ou comportar-se de forma consistente na interface modernizada.

Posso continuar a usar os tokens anteriores?

Tokens anteriores ainda podem ser resolvidos para algumas superfícies anteriores, mas novos e refatorados caminhos da interface do utilizador são lidos primeiro pelos novos tokens semânticos. Se depender de tokens obsoletos, corre o risco de ter uma temática incompleta.

Onde está o tema clássico do Blue?

Substituímo-lo por uma família de temas tonalizados e por opções de aparência do editor Extra Contrast. Também podes instalar o tema comunitário Blue Steel se quiseres uma homenagem mais próxima.

Menos tokens significam menos personalização?

No--- semântic tiers permite criar grandes mudanças visuais ajustando uma paleta pequena. Ainda pode criar personalidades distintas através de tons de destaque, níveis de luminância do fundo e preenchimentos de sistema.

Impacto no desempenho?

A refatoração reduz as consultas de estilo e os recursos redundantes, melhorando a localidade da memória e simplificando a criação diferida de pincéis.

As cores do editor também mudam?

Atualmente, o editor mantém a maior parte da sua colorização sintática. Esta alteração direciona-se a superfícies partilhadas da interface do shell, como janelas de ferramentas, menus e diálogos. Pode escolher a aparência do editor (incluindo Contraste Extra) de forma independente.

Last updated on 2025-11-20

Partilhar via