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

Tokens semânticos fluentes adicionais fornecem controle mais granular sobre áreas de shell. Por exemplo, os tokens EnvironmentHeader e EnvironmentTab permitem que os autores de temas definam independentemente a cor dos cabeçalhos de janelas e abas separadamente dos outros elementos da interface do shell.

Aqui está um exemplo de tokens semânticos com intenção priorizada 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.

Personalizar tokens no Visual Studio

Visual Studio 2026 (18.7) adiciona uma página de opções de cores de tema no IDE para personalização interativa de cores de tema. Use o comando Editar cores do tema ou abra Ferramentas > Opções > Ambiente > Experiência Visual > Cores do tema para exibir os tokens de cor do tema Fluent para o tema ativo em uma grade pesquisável. As alterações se aplicam ao vivo, para que você possa ajustar tokens sem instalar uma extensão, editar JSON ou reiniciar Visual Studio.

A página expõe os mesmos tokens semânticos que os autores de temas definem em um pacote de tema, incluindo tokens para o editor, a janela de ferramentas e as superfícies do shell. Você pode pesquisar tokens e redefinir valores individuais enquanto valida como o tema migrado responde às alterações de token.

As substituições de cores do tema são salvas para o tema selecionado e aplicadas como uma camada sobre o tema base. Alternar entre temas muda qual conjunto de substituições está ativo. Esses comportamentos são úteis ao validar tokens semânticos ou personalizar alguns valores sem criar um pacote de tema completo. Se os usuários substituírem os valores de token após a instalação de um tema, a redefinição desses tokens restaurará os valores definidos pelo tema.

Para compartilhar substituições de tema, coloque um arquivo JSON com nome de tema em %LOCALAPPDATA%\Microsoft\VisualStudio\18.0_xxxxxxxx\ColorThemes. Visual Studio aplica alterações baseadas em arquivo depois de reiniciar o IDE.

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 claro

<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 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 Fluente, 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?

Nenhuma camada semântica permite 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.

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