Modernizar cores de tema do Visual Studio

Os temas do Visual Studio anteriormente dependiam de tokens de cores granulares e específicos de funcionalidades. Com o tempo, essa abordagem produziu milhares de valores sob medida e cores personalizadas, tornando a consistência e a acessibilidade mais difíceis de garantir. Para resolver isso, reconstruímos o sistema em torno de princípios de design claros: menos tokens semânticos para facilitar a manutenção, rampas de cores previsíveis para acessibilidade sustentável e uma experiência mais coesa no Visual Studio, na plataforma Windows e em outras 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 pronto para uso do Visual Studio incluía cerca de 34 categorias e cerca de 1.806 tokens de cores. As extensões geralmente adicionam mais. Essa densidade criou alguns desafios:

Muitos tokens eram quase idênticos, diferenciando-se apenas ligeiramente em tonalidade ou luminosidade, levando à desordem e à confusão visual.
Recursos individuais (como CodeAnalysis, Diagnostics, ManifestDesigner etc.) criaram seus próprios tokens exclusivos, resultando em uso fragmentado e inconsistente de cores.
Verificar o contraste de cores para acessibilidade foi desafiador devido ao grande número de entradas personalizadas.
A experiência geral do usuário tornou-se inconsistente, com superfícies que aparecem incompatíveis ou fora de sincronia.

Aqui está um exemplo de categorias e tokens de cores 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 tokens em um número limitado de categorias com prioridade de intenção e camadas de nomenclatura previsíveis. Um tema de shell pronto para uso agora contém apenas quatro categorias de nível superior e 229 tokens de cores— uma redução de ~87%.

Aqui está um exemplo de tokens semânticos prioritários de intenção 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 proporcionam uma melhor experiência de usuário

Nomenclatura de intenção: Os nomes de token refletem claramente sua função (por exemplo, ControlFill, TextFill, AccentFill, Stroke, SystemFill) e camada (Primária, Secundária, Terciária), tornando o uso intuitivo.
Paleta simplificada: Atualizar um pequeno conjunto de tokens compartilhados instantaneamente melhora a consistência entre o shell e as extensões.
Maior consistência: Menos pontos de personalização significam menos incompatibilidades acidentais e eliminam variantes ligeiramente diferentes.
Acessibilidade aprimorada: Rampas de cores centralizadas e estados semânticos (Sucesso, Cuidado, Crítico, Atenção) tornam a validação de contraste mais fácil e confiável.
Melhor desempenho e manutenção: As camadas semânticas substituem os setters de cores granulares, reduzindo a sobrecarga de manutenção e melhorando a qualidade da interface do usuário.

Migrar temas para o Visual Studio 2026

Você pode tornar um tema anterior compatível com o Visual Studio 2026 mesclando seus tokens existentes com um pequeno conjunto de novos tokens semânticos. Você não precisa recriar todos os tokens anteriores. O Visual Studio 2026 lê os novos tokens primeiro e depois volta para tokens anteriores. Veja como:

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

Tema no qual se basear	FallbackId
Leve	{de3dbbcd-f642-433c-8353-8f1df4370aba}
Escuro	{1ded0138-47ce-435e-84ef-9ec1f439b749}

Acrescente o conjunto de tokens abaixo como as duas últimas categorias após os tokens de tema anteriores. Verifique se o nome da categoria e o GUID são copiados exatamente como abaixo.

Inicialização mínima do conjunto de tokens 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>

Inicialização mínima do conjunto de tokens para um tema baseado em escuro

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

Ajuste os valores de cor para ajustar o tema anterior, conforme necessário.

perguntas frequentes

Por que foi uma mudança significativa?

Além da estrutura do token de cor do tema e das mudanças na convenção de nomenclatura, a maior parte do código da interface do usuário foi refatorada para usar tokens de estilização semântica do Sistema de Design Fluent, em alternativa aos tokens com escopo de recurso ou estilos embutidos anteriores. Embora a maioria da cor antiga e outros recursos de estilo permaneçam presentes no SDK, eles podem não refletir o design mais recente ou se comportar consistentemente na interface do usuário modernizada.

Posso continuar usando os tokens anteriores?

Os tokens anteriores ainda podem ser resolvidos para algumas superfícies anteriores, mas os caminhos de interface do usuário novos e refatorados leem os novos tokens semânticos primeiro. Se você depender de tokens obsoletos, corre o risco de ter o tema incompleto.

Onde está o tema azul clássico?

Substituímos por uma família de temas coloridos e opções de aparência do editor de Contraste Extra. Você também pode instalar o tema Blue Steel da comunidade se quiser uma homenagem mais próxima.

Menos tokens significam menos personalização?

As camadas semânticas permitem que você crie mudanças visuais amplas ajustando uma pequena paleta. Você ainda pode criar personalidades distintas por meio de tom de destaque, níveis de luminância de plano de fundo e preenchimentos de sistema.

Impacto no desempenho?

A refatoração reduz as verificações de estilo e recursos redundantes, melhorando a localidade da memória e simplificando a criação de pincéis adiados.

As cores do editor também estão mudando?

Atualmente, o editor mantém a maior parte de sua colorização de sintaxe. Essa alteração tem como destino superfícies compartilhadas da interface do usuário do shell, como janelas de ferramentas, menus e caixas de diálogo. Você pode escolher a aparência do editor (incluindo Contraste Extra) independentemente.

Last updated on 2025-11-20

Compartilhar via