Visual Studio tokens de cor do tema

Visual Studio usa tokens de cor semântica para definir a aparência de cada superfície da interface do usuário. Esses tokens fazem parte do sistema de design fluente introduzido no Visual Studio 2026. Em vez de referenciar cores hexadecedoras específicas, cada controle e superfície faz referência a um token nomeado. Os temas fornecem valores para esses tokens e todas as atualizações do IDE adequadamente.

Essa referência lista todos os tokens de cores de tema disponíveis, seu uso pretendido e seus valores padrão nos temas Claro, Escuro e Alto Contraste. Use essa referência ao criar temas personalizados ou substituir tokens individuais em suas configurações ou por meio do editor de cores de tema.

Personalizar cores de tema em Visual Studio

Visual Studio 2026 (18.7) inclui uma página de cores de tema no produto para personalizar tokens de cores de tema fluente. Use o comando Editar cores do tema ou abra as cores do Tema da Experiência > Visual do Ambiente > de Opções > de Ferramentas>. A página lista os tokens do tema ativo em uma grade pesquisável.

Selecione um token e escolha uma cor para aplicar a alteração imediatamente. Você pode redefinir um token individual sem remover suas outras personalizações. As substituições são salvas separadamente para cada tema e em camadas sobre o tema selecionado, portanto, alternar temas também alterna para as substituições salvas para esse tema. Dependendo dos tokens disponíveis, você pode personalizar cores do editor, janelas de ferramentas, cromado de shell, cabeçalhos de guia, cabeçalhos de janela e estados de interação, como cores de foco.

Para obter configurações mais amplas de aparência do usuário final, consulte Alterar fontes, cores e temas em Visual Studio.

Substituições de tema de compartilhamento

Para compartilhar substituições de token, coloque um arquivo JSON em %LOCALAPPDATA%\Microsoft\VisualStudio\18.0_xxxxxxxx\ColorThemes. O nome do arquivo deve corresponder ao tema a ser substituído. Por exemplo, dark.json substitui o tema Escuro. Reinicie Visual Studio para aplicar substituições baseadas em arquivo ao tema correspondente.

Como funcionam os tokens de tema

Cada token é um nome semântico que é mapeado para um valor de cor. Os tokens são organizados em duas categorias:

  • Shell (ShellColors) – tokens para controles e superfícies comuns, derivados do sistema de design fluente Windows 11. Estes botões de cobertura, caixas de texto, planos de fundo, bordas, indicadores de status e muito mais. Use esses tokens para o estilo geral da interface do usuário.
  • Shell interno (ShellInternalColors) – tokens para superfícies cromadas IDE, como a janela principal, a barra de título, a barra de status e os cabeçalhos da janela da ferramenta. Elas são expostas para substituições de tema, mas não se destinam ao estilo de controle de extensão.

Formato de valor de cor

As cores são especificadas em #AARRGGBB formato (alfa, vermelho, verde, azul). Por exemplo, #B2FFFFFF é branco em ~70% opacidade.

Valores de Alto Contraste são índices de cor do sistema (por exemplo, 00000008 = WindowText). Visual Studio resolve isso para o esquema de cores de Alto Contraste atual do usuário em runtime.

Comportamento de substituição

Os valores de token fornecidos pelo tema são os valores base para o tema selecionado. Quando um usuário altera um token no editor de cores de tema, Visual Studio aplica esse valor como uma camada de substituição sobre o tema selecionado. Remover ou redefinir uma substituição individual restaura o token para o valor base do tema selecionado sem afetar outras substituições.

Cores do shell

Esses tokens estilizam controles e superfícies comuns em Visual Studio. Eles seguem as mesmas convenções de nomenclatura que Windows 11 recursos de tema fluente.

Destaque

Tokens para elementos de cor de destaque, como botões primários, caixas de seleção selecionadas e indicadores ativos.

Símbolo Descrição Claro Escuro Alto Contraste
AccentFillAlt Plano de fundo de acento alternativo, usado quando um matiz diferente do Padrão é necessário #FF3F3682 #FFD2CCF8 0000000D
AccentFillDefault Plano de fundo de ênfase padrão para elementos interativos, chamadas à ação e estados selecionados #FF5649B0 #FF9184EE 0000000D
AccentFillDisabled Plano de fundo de ênfase desabilitado #37000000 #28FFFFFF 00000010
AccentFillSecondary Plano de fundo de ênfase que indica o estado de foco #E55649B0 #E59184EE 0000000D
AccentFillSelectedTextBackground Plano de fundo para texto selecionado em campos de texto ativos #FF0078D4 #FF005FB7 0000000D
AccentFillSelectedTextBackgroundSubtle Plano de fundo de texto selecionado sutil, usado quando a cor do texto em primeiro plano não pode ser invertida #4D0078D4 #6660CDFF 0000000D
AccentFillSenary Plano de fundo de acento sutil para estados além do Terciário #1F5649B0 #1F9184EE 0000000E
AccentFillTertiary Plano de fundo de ênfase que indica estado pressionado #CC5649B0 #CC9184EE 0000000D
AccentTextFillDisabled Texto de ênfase desabilitado e cor do glifo #5C000000 #5DFFFFFF 00000011
AccentTextFillPrimary Cor do texto de destaque primário para texto em primeiro plano e glifos que exigem ênfase #FF3F3682 #FFD2CCF8 00000002
AccentTextFillSecondary Texto de ênfase que indica o estado de foco #FF221D46 #FFD2CCF8 00000002
AccentTextFillTertiary Texto de ênfase que indica o estado pressionado #FF5649B0 #FFA79CF1 00000002

Cartão

Tokens para superfícies semelhantes a cartão – blocos de conteúdo que ficam em planos de fundo de página ou camada.

Símbolo Descrição Claro Escuro Alto Contraste
CardBackgroundFillDefault Plano de fundo do cartão padrão #B2FFFFFF #0DFFFFFF 00000005
CardBackgroundFillSecondary Plano de fundo do cartão que indica o estado de foco #80F6F6F6 #08FFFFFF 00000005
CardBackgroundFillTertiary Plano de fundo do cartão indicando estado pressionado #FFFFFFFF #12FFFFFF 00000005
CardStrokeDefault Borda do cartão padrão #0F000000 #1A000000 00000010
CardStrokeDefaultSolid Borda de cartão sólida, usada quando traços semi transparentes causam problemas de visibilidade #FFEBEBEB #FF1C1C1C 00000010
CardStrokeDefaultSolidAlt Borda de cartão sólida alternativa #FFDADADA #FF0A0A0A 00000010

Controle

Tokens para controles interativos padrão, como botões, caixas de texto e caixas de combinação.

Símbolo Descrição Claro Escuro Alto Contraste
ControlAltFillDisabled Plano de fundo de controle alternativo desabilitado #00FFFFFF #00FFFFFF 0000000F
ControlAltFillQuaternary Plano de fundo de controle alternativo de quarto nível #18000000 #12FFFFFF 0000000E
ControlAltFillSecondary Segundo plano de fundo de controle alternativo #06000000 #1A000000 0000000E
ControlAltFillTertiary Plano de fundo de controle alternativo de terceiro nível #0F000000 #0BFFFFFF 0000000E
ControlAltFillTransparent Plano de fundo de controle alternativo transparente #00FFFFFF #00FFFFFF 0000000E
ControlFillActiveInput Controlar o plano de fundo durante a entrada de texto ativo #FFFFFFFF #B21E1E1E 0000000F
ControlFillDefault Plano de fundo de controle padrão (estado rest) #B2FFFFFF #0FFFFFFF 0000000F
ControlFillDisabled Plano de fundo de controle desabilitado #4DF9F9F9 #0BFFFFFF 0000000F
ControlFillQuaternary Plano de fundo de controle de quarto nível #C2F3F3F3 #0FFFFFFF 0000000E
ControlFillSecondary Segundo plano de fundo de controle (focalização) #80F9F9F9 #15FFFFFF 0000000E
ControlFillTertiary Segundo plano de controle de terceiro nível (pressionado) #4DF9F9F9 #08FFFFFF 0000000E
ControlFillTransparent Plano de fundo de controle transparente #00FFFFFF #00FFFFFF 0000000F
ControlOnImageFillDefault Plano de fundo de controle padrão quando colocado em uma imagem #C9FFFFFF #B21C1C1C 0000000F
ControlOnImageFillDisabled Tela de fundo de controle desabilitada quando colocada em uma imagem #00FFFFFF #001E1E1E 0000000F
ControlOnImageFillSecondary Tela de fundo do controle de focalização quando colocada em uma imagem #FFF3F3F3 #FF1A1A1A 0000000E
ControlOnImageFillTertiary Tela de fundo de controle pressionada quando colocada em uma imagem #FFEBEBEB #FF131313 0000000E
ControlSolidFillDefault Plano de fundo de controle sólido, usado quando a transparência causa problemas de visibilidade #FFFFFFFF #FF454545 0000000F
ControlStrokeDefault Borda de controle padrão (estado rest) #0F000000 #12FFFFFF 00000010
ControlStrokeForStrongFillWhenOnImage Borda de controle para preenchimentos fortes colocados em imagens #59FFFFFF #6B000000 0000000A
ControlStrokeOnAccentDefault Borda padrão para controles em planos de fundo de ênfase #14FFFFFF #14FFFFFF 0000000B
ControlStrokeOnAccentDisabled Borda desabilitada para controles em planos de fundo de ênfase #0F000000 #33000000 0000000B
ControlStrokeOnAccentSecondary Borda do mouse para controles em planos de fundo de ênfase #66000000 #24000000 0000000B
ControlStrokeOnAccentTertiary Borda pressionada para controles em planos de fundo de ênfase #37000000 #37000000 0000000B
ControlStrokeSecondary Borda de controle de segundo nível #0F000000 #12FFFFFF 00000008
ControlStrokeTransparent Borda de controle transparente #00FFFFFF #00FFFFFF 0000000F
ControlStrongFillDefault Preenchimento de controle forte para elementos de alto contraste, como barras de rolagem #72000000 #8BFFFFFF 0000000A
ControlStrongFillDisabled Preenchimento de controle forte desabilitado #51000000 #3FFFFFFF 0000000F
ControlStrongStrokeDefault Borda de controle forte para caixas de seleção e botões de opção #9C000000 #9AFFFFFF 00000008
ControlStrongStrokeDisabled Borda de controle forte desabilitada #37000000 #28FFFFFF 0000000B

Divisor

Símbolo Descrição Claro Escuro Alto Contraste
DividerStrokeDefault Traço do separador e do separador padrão #14000000 #15FFFFFF 00000011

Foco

Símbolo Descrição Claro Escuro Alto Contraste
FocusStrokeInner Traço do indicador de foco interno #FFFFFFFF #B2000000 00000005
FocusStrokeOuter Traço do indicador de foco externo #E4000000 #FFFFFFFF 00000008
Símbolo Descrição Claro Escuro Alto Contraste
HyperlinkFillDisabled Cor do texto do hiperlink desabilitado #5C000000 #5DFFFFFF 00000013
HyperlinkFillPrimary Cor do texto do hiperlink primário (rest) #FF003E92 #FF99EBFF 0000001A
HyperlinkFillSecondary Cor do texto do hiperlink (focalizar) #FF001A68 #FF60CDFF 0000001A
HyperlinkFillTertiary Cor do texto do hiperlink (pressionado) #FF005FB8 #E560CDFF 0000001A

Camada e superfície

Tokens para planos de fundo, superfícies em camadas e contêineres no nível da página.

Símbolo Descrição Claro Escuro Alto Contraste
LayerFillAlt Preenchimento de camada alternativa para superfícies #FFFFFFFF #0EFFFFFF 00000005
LayerFillDefault Preenchimento de camada padrão para superfícies e barras de rolagem #80FFFFFF #4D3A3A3A 00000005
SolidBackgroundFillBase Plano de fundo sólido base para superfícies de página #FFF3F3F3 #FF202020 00000005
SolidBackgroundFillBaseAlt Plano de fundo sólido de base alternativa #FFDADADA #FF0A0A0A 00000005
SolidBackgroundFillSecondary Plano de fundo sólido secundário (um nível acima da Base) #FFEEEEEE #FF1C1C1C 00000005
SolidBackgroundFillTertiary Plano de fundo sólido terciário #FFF9F9F9 #FF282828 00000005
SolidBackgroundFillQuaternary Plano de fundo sólido de quarto nível #FFFFFFFF #FF2C2C2C 00000005
SolidBackgroundFillQuinary Plano de fundo sólido de quinto nível #FFFDFDFD #FF333333 00000005
SolidBackgroundFillSenary Plano de fundo sólido de sexto nível #FFFFFFFF #FF373737 00000005
SurfaceBackgroundFillDefault Plano de fundo padrão para superfícies discretas acima da base #FFF9F9F9 #FF2C2C2C 00000005
SurfaceStrokeDefault Borda de superfície padrão #66757575 #66757575 0000000A
SurfaceStrokeFlyout Borda da superfície do submenu #0F000000 #33000000 0000000A

Sombra e fumaça

Símbolo Descrição Claro Escuro Alto Contraste
ShadowFlyout Cor da sombra para superfícies de submenu, como pop-ups, dicas de ferramentas e menus de contexto #24000000 #42000000 00000005
SmokeFillDefault Cor de sobreposição de fumaça para esmaecer superfícies de plano de fundo #4D000000 #4D000000 0000000F
SmokeFillInverse Cor de sobreposição de fumaça inversa #C9FFFFFF #B21C1C1C 0000000F

Sutil

Tokens para controles com peso visual mínimo, como botões de barra de ferramentas e itens de menu.

Símbolo Descrição Claro Escuro Alto Contraste
SubtleFillDisabled Preenchimento de controle sutil desabilitado #00000000 #00FFFFFF 00000005
SubtleFillSecondary Preenchimento de controle sutil (focalização) #0F000000 #0FFFFFFF 0000000F
SubtleFillTertiary Preenchimento de controle sutil (pressionado) #0A000000 #0BFFFFFF 0000000F
SubtleFillTransparent Preenchimento de controle sutil transparente #00FFFFFF #00FFFFFF 00000005

Status do sistema

Tokens para indicadores de status – atenção, cuidado, crítico, êxito e neutro.

Símbolo Descrição Claro Escuro Alto Contraste
SystemFillAttention Borda e traço do indicador de atenção (informativo) #FF005FB7 #FF60CDFF 00000002
SystemFillAttentionBackground Plano de fundo do indicador de atenção #80F6F6F6 #08FFFFFF 00000018
SystemFillCaution Borda e traço do indicador de aviso #FF9D5D00 #FFFCE100 00000002
SystemFillCautionBackground Plano de fundo do indicador de aviso #FFFFF4CE #FF433519 00000018
SystemFillCritical Borda e traço do indicador de erro #FFC42B1C #FFFF99A4 00000002
SystemFillCriticalBackground Plano de fundo do indicador de erro #FFFDE7E9 #FF442726 00000018
SystemFillNeutral Preenchimento neutro do sistema #72000000 #8BFFFFFF 00000002
SystemFillNeutralBackground Plano de fundo do sistema neutro #06000000 #08FFFFFF 00000018
SystemFillSolidAttentionBackground Fundo de atenção sólida, usado quando a transparência causa problemas de visibilidade #FFF7F7F7 #FF2E2E2E 00000018
SystemFillSolidNeutral Preenchimento de indicador neutro sólido #FF8A8A8A #FF8A8A8A 00000002
SystemFillSolidNeutralBackground Plano de fundo neutro sólido #FFF3F3F3 #FF2E2E2E 00000018
SystemFillSuccess Borda e traço do indicador de êxito #FF0F7B0F #FF6CCB5F 00000002
SystemFillSuccessBackground Plano de fundo do indicador de êxito #FFDFF6DD #FF393D1B 00000018

Texto

Símbolo Descrição Claro Escuro Alto Contraste
TextFillDisabled Cor do texto desabilitado #5C000000 #5DFFFFFF 00000011
TextFillPrimary Cor do texto primário para conteúdo geral #E4000000 #FFFFFFFF 00000008
TextFillSecondary Cor do texto secundário para conteúdo e dicas complementares #9E000000 #C8FFFFFF 00000008
TextFillTertiary Cor do texto terciário (baixo contraste – não use para conteúdo primário em repouso) #72000000 #8BFFFFFF 00000008
TextOnAccentFillDisabled Texto desabilitado em planos de fundo de destaque #B2FFFFFF #80000000 00000003
TextOnAccentFillPrimary Texto primário em planos de fundo de ênfase #FFFFFFFF #FF000000 0000000E
TextOnAccentFillSecondary Texto secundário em planos de fundo de ênfase #B2FFFFFF #80000000 0000000E
TextOnAccentFillSelectedText Cor do texto para texto selecionado em planos de fundo de ênfase #FFFFFFFF #FFFFFFFF 0000000E

Cores internas do shell

Esses tokens controlam superfícies cromadas IDE – o quadro principal da janela, os cabeçalhos da janela da ferramenta, as guias, a barra de status e outros elementos no nível do shell. Eles são os principais tokens que os autores de temas usam para alterar a sensação geral do IDE.

Visual Studio adiciona tokens de cores fluentes à medida que as áreas de shell se tornam mais granulares. Tokens adicionais podem aparecer para superfícies cromadas, como cabeçalhos de guia e cabeçalhos de janela, para que os autores do tema possam estilizar essas áreas independentemente de outros shell chrome.

Ambiente

Tokens que controlam a janela principal e as superfícies cromadas do shell.

Símbolo Descrição Claro Escuro Alto Contraste
EnvironmentBackground Tela de fundo da janela principal e janelas de ferramentas flutuantes #FFEEEEEE #FF1C1C1C 00000005
EnvironmentBadge Plano de fundo do Selo de Informações da Solução (por exemplo, indicador live share) #B2FFFFFF #0FFFFFFF 0000000F
EnvironmentBody Plano de fundo da área de corpo/conteúdo da janela principal do shell #FFEEEEEE #FF1C1C1C 00000005
EnvironmentBodyText Cor do texto na área corpo/conteúdo da janela do shell principal #E4000000 #FFFFFFFF 00000008
EnvironmentBorder Borda da janela principal ativa #FF5649B0 #FF9184EE 0000000A
EnvironmentBorderInactive Borda da janela principal inativa e divisores internos #FFADADAD #FF454545 00000003
EnvironmentHeader Janela ativa ou plano de fundo do cabeçalho da janela de ferramentas, separado dos planos de fundo de tabulação #FFF9F9F9 #FF282828 00000005
EnvironmentHeaderInactive Janela inativa ou plano de fundo do cabeçalho da janela de ferramentas, separado dos planos de fundo de tabulação #FFF9F9F9 #FF282828 00000005
EnvironmentIndicator Borda ou indicador para guias ocultas automaticamente #66757575 #66757575 0000000A
EnvironmentLayeredBackground Plano de fundo para elementos em camadas, como InfoBars e grupos de guias #80FFFFFF #4D3A3A3A 00000005
EnvironmentLayeredBorder Borda para elementos em camadas, como InfoBars e selos #0F000000 #80000000 00000010
EnvironmentLogo Visual Studio preenchimento do logotipo no menu do sistema #FF5649B0 #FF9184EE 0000000D
EnvironmentTab Plano de fundo do cabeçalho de guia ativo, separado dos cabeçalhos da janela e da janela de ferramentas #FFF9F9F9 #FF282828 00000005
EnvironmentTabInactive Plano de fundo do cabeçalho de guia inativo, separado dos cabeçalhos da janela e da janela de ferramentas #FFF9F9F9 #FF282828 00000005

Legenda

Tokens para o botão de fechamento da janela especificamente.

Símbolo Descrição Claro Escuro Alto Contraste
CaptionControlCloseFillPrimary Fechar plano de fundo do botão (focalizar) #FFC42B1C #FFC42B1C 0000000D
CaptionControlCloseFillSecondary Fechar plano de fundo do botão (pressionado) #E6C42B1C #E6C42B1C 0000000D
CaptionControlCloseTextFillPrimary Fechar a cor do ícone do botão (focalizar) #FFFFFFFF #FFFFFFFF 00000009
CaptionControlCloseTextFillSecondary Fechar a cor do ícone do botão (pressionado) #B3FFFFFF #B3FFFFFF 00000009

Barra de status

Tokens para a barra de status em seus diferentes modos.

Símbolo Descrição Claro Escuro Alto Contraste
StatusBarBackgroundFillBuilding Plano de fundo da barra de status ao criar #FF5649B0 #FF3F3682 00000005
StatusBarBackgroundFillDebugging Plano de fundo da barra de status ao depurar #FFBC4B09 #FF7A2101 00000005
StatusBarBackgroundFillRest Plano de fundo da barra de status no estado padrão #8B000000 #4D000000 00000005
StatusBarBackgroundFillSolutionLoading Plano de fundo da barra de status ao carregar uma solução #FF005BA1 #FF003B6A 00000005
StatusBarControlFillSecondary Preenchimento de controle secundário na barra de status #33000000 #20FFFFFF 0000000E
StatusBarTextFillBuilding Texto da barra de status ao compilar #FFFFFFFF #FFFFFFFF 00000008
StatusBarTextFillDebugging Texto da barra de status ao depurar #FFFFFFFF #FFFFFFFF 00000008
StatusBarTextFillDisabled Texto da barra de status desabilitado #90FFFFFF #5DFFFFFF 00000011
StatusBarTextFillRest Texto da barra de status no estado padrão #FFFFFFFF #FFFFFFFF 00000008
StatusBarTextFillSolutionLoading Texto da barra de status ao carregar uma solução #FFFFFFFF #FFFFFFFF 00000008

Referência de cor do sistema de alto contraste

Valores de Alto Contraste são índices de cor do sistema. Visual Studio mapeia-os para o esquema de cores de Alto Contraste ativo do usuário. Índices comuns:

Index Cor do sistema
00000001 ActiveCaption
00000002 ActiveCaptionText
00000003 ActiveBorder
00000005 Window
00000008 WindowText
00000009 HotTrackColor
0000000A InactiveBorder
0000000B InactiveCaption
0000000D Highlight
0000000E HighlightText
0000000F ButtonFace
00000010 ButtonShadow
00000011 GrayText
00000013 InactiveCaptionText
00000018 GradientActiveCaption
0000001A HotLight