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

Os tokens semânticos Fluent adicionais permitem um controlo mais granular sobre as áreas da shell. Por exemplo, EnvironmentHeader e EnvironmentTab os tokens permitem que os autores de temas coloram independentemente os cabeçalhos das janelas e tabuladores de outros Chrome shell.

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.

Personalizar os tokens no Visual Studio

O Visual Studio 2026 (18.7) adiciona uma página de opções de cores de tema dentro do IDE para personalização interativa das cores do tema. Utilize o comando Editar cores do tema, ou abra Ferramentas > Opções > Ambiente > Experiência Visual > Cores do tema, para visualizar os tokens de cor do tema Fluent do tema ativo numa grelha pesquisável. As alterações aplicam-se ao vivo, por isso podes ajustar tokens sem instalar uma extensão, editar JSON ou reiniciar o Visual Studio.

A página expõe os mesmos tokens semânticos que os autores de temas definem num pacote de tema, incluindo tokens para editor, janela de ferramentas e superfícies de shell. Podes pesquisar tokens e redefinir valores individuais enquanto validas como o teu tema migrado responde às alterações dos tokens.

As sobreposições de cor do tema são guardadas para o tema selecionado e aplicadas como uma camada por cima do tema base. Mudar de tema altera qual override set está ativo. Estes comportamentos são úteis ao validar tokens semânticos ou personalizar alguns valores sem criar um pacote temático completo. Se os utilizadores substituírem os valores dos tokens após instalarem um tema, repor esses tokens restaura os valores fornecidos pelo tema.

Para partilhar sobreposições de tema, coloque um ficheiro JSON com nome de tema em %LOCALAPPDATA%\Microsoft\VisualStudio\18.0_xxxxxxxx\ColorThemes. O Visual Studio aplica alterações baseadas em ficheiros depois de reiniciar o IDE.

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 de base	FallbackId
Light	{de3dbbcd-f642-433c-8353-8f1df4370aba}
Dark	{1DED0138-47CE-435E-84EF-9EC1F439B749}

Adicione o conjunto de tokens abaixo como as duas categorias finais, a seguir aos 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.

Última atualização a 2026-09-02