tokens de color de tema de Visual Studio

Visual Studio usa tokens de color semántico para definir la apariencia de cada superficie de interfaz de usuario. Estos tokens forman parte del sistema de diseño fluent introducido en Visual Studio 2026. En lugar de hacer referencia a colores hexadecimales específicos, cada control y superficie hace referencia a un token con nombre. Los temas proporcionan valores para estos tokens y todo el IDE se actualiza en consecuencia.

En esta referencia se enumeran todos los tokens de color de tema disponibles, su uso previsto y sus valores predeterminados en los temas Claro, Oscuro y Contraste alto. Use esta referencia al crear temas personalizados o invalidar tokens individuales en la configuración o a través del editor colores del tema .

Personalización de colores de tema en Visual Studio

Visual Studio 2026 (18.7) incluye una página de colores del tema en el producto para personalizar los tokens de color del tema fluent. Use el comando Edit theme colors (Editar colores del tema) o abra Tools Options Environment Visual Experience Theme colors (Colores > del tema de la experiencia > visual del entorno de herramientas>).> En la página se enumeran los tokens del tema activo en una cuadrícula en la que se pueden buscar.

Seleccione un token y elija un color para aplicar el cambio inmediatamente. Puede restablecer un token individual sin quitar las demás personalizaciones. Las invalidaciones se guardan por separado para cada tema y se superponen al tema seleccionado, por lo que cambiar los temas también cambia a las invalidaciones guardadas para ese tema. Dependiendo de los tokens disponibles, puede personalizar los colores del editor, las ventanas de herramientas, el cromo del shell, los encabezados de pestaña, los encabezados de ventana y los estados de interacción, como los colores del puntero.

Para obtener una configuración más amplia de la apariencia del usuario final, consulte Cambio de fuentes, colores y temas en Visual Studio.

Invalidaciones de tema para compartir

Para compartir invalidaciones de token, coloque un archivo JSON en %LOCALAPPDATA%\Microsoft\VisualStudio\18.0_xxxxxxxx\ColorThemes. El nombre de archivo debe coincidir con el tema que se va a invalidar. Por ejemplo, dark.json invalida el tema Oscuro. Reinicie Visual Studio para aplicar invalidaciones basadas en archivos al tema coincidente.

Funcionamiento de los tokens de tema

Cada token es un nombre semántico que se asigna a un valor de color. Los tokens se organizan en dos categorías:

  • Shell (ShellColors): tokens para controles y superficies comunes, derivados del sistema de diseño fluent Windows 11. Estos botones de portada, cuadros de texto, fondos, bordes, indicadores de estado, etc. Use estos tokens para el estilo general de la interfaz de usuario.
  • Shell interno (ShellInternalColors): tokens para superficies de cromo ide como la ventana principal, la barra de título, la barra de estado y los encabezados de ventana de herramientas. Se exponen para invalidaciones de tema, pero no están pensadas para el estilo de control de extensión.

Formato de valor de color

Los colores se especifican en #AARRGGBB formato (alfa, rojo, verde, azul). Por ejemplo, #B2FFFFFF es blanco en ~70% opacidad.

Los valores de contraste alto son índices de color del sistema (por ejemplo, 00000008 = WindowText). Visual Studio resuelve esto en la combinación de colores de contraste alto actual del usuario en tiempo de ejecución.

Comportamiento de invalidación

Los valores de token proporcionados por tema son los valores base del tema seleccionado. Cuando un usuario cambia un token en el editor colores del tema, Visual Studio aplica ese valor como una capa de invalidación sobre el tema seleccionado. Al quitar o restablecer una invalidación individual, se restaura el token al valor base del tema seleccionado sin afectar a otras invalidaciones.

Colores del shell

Estos tokens muestran controles y superficies comunes en Visual Studio. Siguen las mismas convenciones de nomenclatura que Windows 11 recursos de temas de Fluent.

Énfasis

Tokens para elementos de color de énfasis, como botones principales, casillas seleccionadas e indicadores activos.

Token Descripción Claro Oscuro Contraste alto
AccentFillAlt Fondo de énfasis alternativo, que se usa cuando se necesita un tono diferente del predeterminado #FF3F3682 #FFD2CCF8 0000000D
AccentFillDefault Fondo de énfasis predeterminado para elementos interactivos, llamadas a la acción y estados seleccionados #FF5649B0 #FF9184EE 0000000D
AccentFillDisabled Fondo de énfasis deshabilitado #37000000 #28FFFFFF 00000010
AccentFillSecondary Fondo de énfasis que indica el estado del puntero #E55649B0 #E59184EE 0000000D
AccentFillSelectedTextBackground Fondo del texto seleccionado en campos de texto activos #FF0078D4 #FF005FB7 0000000D
AccentFillSelectedTextBackgroundSubtle Fondo de texto seleccionado sutil, que se usa cuando no se puede invertir el color del texto en primer plano #4D0078D4 #6660CDFF 0000000D
AccentFillSenary Fondo de énfasis sutil para estados más allá del terciario #1F5649B0 #1F9184EE 0000000E
AccentFillTertiary Fondo de énfasis que indica el estado presionado #CC5649B0 #CC9184EE 0000000D
AccentTextFillDisabled Texto de énfasis deshabilitado y color de glifo #5C000000 #5DFFFFFF 00000011
AccentTextFillPrimary Color de texto de énfasis principal para texto en primer plano y glifos que requieren énfasis #FF3F3682 #FFD2CCF8 00000002
AccentTextFillSecondary Texto de énfasis que indica el estado del puntero #FF221D46 #FFD2CCF8 00000002
AccentTextFillTertiary Texto de énfasis que indica el estado presionado #FF5649B0 #FFA79CF1 00000002

Tarjeta

Tokens para superficies similares a tarjetas: bloques de contenido que se encuentran en fondos de página o capas.

Token Descripción Claro Oscuro Contraste alto
CardBackgroundFillDefault Fondo de tarjeta predeterminado #B2FFFFFF #0DFFFFFF 00000005
CardBackgroundFillSecondary Fondo de la tarjeta que indica el estado del puntero #80F6F6F6 #08FFFFFF 00000005
CardBackgroundFillTertiary Fondo de tarjeta que indica el estado presionado #FFFFFFFF #12FFFFFF 00000005
CardStrokeDefault Borde de tarjeta predeterminado #0F000000 #1A000000 00000010
CardStrokeDefaultSolid Borde de tarjeta sólida, usado cuando los trazos semitransparentes provocan problemas de visibilidad #FFEBEBEB #FF1C1C1C 00000010
CardStrokeDefaultSolidAlt Borde alternativo de tarjeta sólida #FFDADADA #FF0A0A0A 00000010

Supervisión

Tokens para controles interactivos estándar, como botones, cuadros de texto y cuadros combinados.

Token Descripción Claro Oscuro Contraste alto
ControlAltFillDisabled Fondo de control alternativo deshabilitado #00FFFFFF #00FFFFFF 0000000F
ControlAltFillQuaternary Fondo de control alternativo de cuarto nivel #18000000 #12FFFFFF 0000000E
ControlAltFillSecondary Segundo nivel de fondo de control alternativo #06000000 #1A000000 0000000E
ControlAltFillTertiary Fondo de control alternativo de tercer nivel #0F000000 #0BFFFFFF 0000000E
ControlAltFillTransparent Fondo de control alternativo transparente #00FFFFFF #00FFFFFF 0000000E
ControlFillActiveInput Control del fondo durante la entrada de texto activa #FFFFFFFF #B21E1E1E 0000000F
ControlFillDefault Fondo de control predeterminado (estado de reposo) #B2FFFFFF #0FFFFFFF 0000000F
ControlFillDisabled Fondo de control deshabilitado #4DF9F9F9 #0BFFFFFF 0000000F
ControlFillQuaternary Fondo de control de cuarto nivel #C2F3F3F3 #0FFFFFFF 0000000E
ControlFillSecondary Segundo nivel de fondo del control (mantener el puntero) #80F9F9F9 #15FFFFFF 0000000E
ControlFillTertiary Fondo de control de tercer nivel (presionado) #4DF9F9F9 #08FFFFFF 0000000E
ControlFillTransparent Fondo de control transparente #00FFFFFF #00FFFFFF 0000000F
ControlOnImageFillDefault Fondo de control predeterminado cuando se coloca en una imagen #C9FFFFFF #B21C1C1C 0000000F
ControlOnImageFillDisabled Fondo de control deshabilitado cuando se coloca en una imagen #00FFFFFF #001E1E1E 0000000F
ControlOnImageFillSecondary Fondo del control de mantener el mouse cuando se coloca en una imagen #FFF3F3F3 #FF1A1A1A 0000000E
ControlOnImageFillTertiary Fondo de control presionado cuando se coloca en una imagen #FFEBEBEB #FF131313 0000000E
ControlSolidFillDefault Fondo de control sólido, usado cuando la transparencia provoca problemas de visibilidad #FFFFFFFF #FF454545 0000000F
ControlStrokeDefault Borde de control predeterminado (estado de rest) #0F000000 #12FFFFFF 00000010
ControlStrokeForStrongFillWhenOnImage Borde de control para rellenos fuertes colocados en imágenes #59FFFFFF #6B000000 0000000A
ControlStrokeOnAccentDefault Borde predeterminado para controles en fondos de énfasis #14FFFFFF #14FFFFFF 0000000B
ControlStrokeOnAccentDisabled Borde deshabilitado para controles en fondos de énfasis #0F000000 #33000000 0000000B
ControlStrokeOnAccentSecondary Borde de puntero para los controles en fondos de énfasis #66000000 #24000000 0000000B
ControlStrokeOnAccentTertiary Borde presionado para controles en fondos de énfasis #37000000 #37000000 0000000B
ControlStrokeSecondary Borde de control de segundo nivel #0F000000 #12FFFFFF 00000008
ControlStrokeTransparent Borde de control transparente #00FFFFFF #00FFFFFF 0000000F
ControlStrongFillDefault Relleno de control seguro para elementos de contraste alto, como barras de desplazamiento #72000000 #8BFFFFFF 0000000A
ControlStrongFillDisabled Relleno de control seguro deshabilitado #51000000 #3FFFFFFF 0000000F
ControlStrongStrokeDefault Borde de control seguro para casillas y botones de radio #9C000000 #9AFFFFFF 00000008
ControlStrongStrokeDisabled Borde de control seguro deshabilitado #37000000 #28FFFFFF 0000000B

Divisor

Token Descripción Claro Oscuro Contraste alto
DividerStrokeDefault Trazo separador y separador predeterminados #14000000 #15FFFFFF 00000011

Enfoque

Token Descripción Claro Oscuro Contraste alto
FocusStrokeInner Trazo del indicador de foco interno #FFFFFFFF #B2000000 00000005
FocusStrokeOuter Trazo de indicador de foco externo #E4000000 #FFFFFFFF 00000008
Token Descripción Claro Oscuro Contraste alto
HyperlinkFillDisabled Color de texto de hipervínculo deshabilitado #5C000000 #5DFFFFFF 00000013
HyperlinkFillPrimary Color del texto del hipervínculo principal (resto) #FF003E92 #FF99EBFF 0000001A
HyperlinkFillSecondary Color del texto del hipervínculo (mantener el puntero) #FF001A68 #FF60CDFF 0000001A
HyperlinkFillTertiary Color del texto del hipervínculo (presionado) #FF005FB8 #E560CDFF 0000001A

Capa y superficie

Tokens para fondos, superficies superpuestas y contenedores de nivel de página.

Token Descripción Claro Oscuro Contraste alto
LayerFillAlt Relleno de capas alternativo para superficies #FFFFFFFF #0EFFFFFF 00000005
LayerFillDefault Relleno de capas predeterminado para superficies y barras de desplazamiento #80FFFFFF #4D3A3A3A 00000005
SolidBackgroundFillBase Fondo sólido base para superficies de página #FFF3F3F3 #FF202020 00000005
SolidBackgroundFillBaseAlt Fondo sólido base alternativo #FFDADADA #FF0A0A0A 00000005
SolidBackgroundFillSecondary Fondo sólido secundario (un nivel superior a base) #FFEEEEEE #FF1C1C1C 00000005
SolidBackgroundFillTertiary Fondo sólido terciario #FFF9F9F9 #FF282828 00000005
SolidBackgroundFillQuaternary Fondo sólido de cuarto nivel #FFFFFFFF #FF2C2C2C 00000005
SolidBackgroundFillQuinary Segundo plano sólido de quinto nivel #FFFDFDFD #FF333333 00000005
SolidBackgroundFillSenary Fondo sólido de sexto nivel #FFFFFFFF #FF373737 00000005
SurfaceBackgroundFillDefault Fondo predeterminado para superficies discretas por encima de la base #FFF9F9F9 #FF2C2C2C 00000005
SurfaceStrokeDefault Borde de superficie predeterminado #66757575 #66757575 0000000A
SurfaceStrokeFlyout Borde de superficie de control flotante #0F000000 #33000000 0000000A

Sombra y humo

Token Descripción Claro Oscuro Contraste alto
ShadowFlyout Color de sombra para superficies flotantes como elementos emergentes, información sobre herramientas y menús contextuales #24000000 #42000000 00000005
SmokeFillDefault Color de superposición de humo para atenuar las superficies de fondo #4D000000 #4D000000 0000000F
SmokeFillInverse Color de superposición inversa de humo #C9FFFFFF #B21C1C1C 0000000F

Sutil

Tokens para controles con un peso visual mínimo, como botones de barra de herramientas y elementos de menú.

Token Descripción Claro Oscuro Contraste alto
SubtleFillDisabled Relleno sutil del control deshabilitado #00000000 #00FFFFFF 00000005
SubtleFillSecondary Relleno sutil del control (mantener el puntero) #0F000000 #0FFFFFFF 0000000F
SubtleFillTertiary Relleno sutil del control (presionado) #0A000000 #0BFFFFFF 0000000F
SubtleFillTransparent Relleno de control sutil transparente #00FFFFFF #00FFFFFF 00000005

Estado del sistema

Tokens para indicadores de estado: atención, precaución, crítico, éxito y neutral.

Token Descripción Claro Oscuro Contraste alto
SystemFillAttention Borde y trazo del indicador de atención (informativo) #FF005FB7 #FF60CDFF 00000002
SystemFillAttentionBackground Fondo del indicador de atención #80F6F6F6 #08FFFFFF 00000018
SystemFillCaution Borde y trazo del indicador de advertencia #FF9D5D00 #FFFCE100 00000002
SystemFillCautionBackground Fondo del indicador de advertencia #FFFFF4CE #FF433519 00000018
SystemFillCritical Borde y trazo del indicador de error #FFC42B1C #FFFF99A4 00000002
SystemFillCriticalBackground Fondo del indicador de error #FFFDE7E9 #FF442726 00000018
SystemFillNeutral Relleno del sistema neutro #72000000 #8BFFFFFF 00000002
SystemFillNeutralBackground Fondo del sistema neutro #06000000 #08FFFFFF 00000018
SystemFillSolidAttentionBackground Fondo de atención sólido, utilizado cuando la transparencia provoca problemas de visibilidad #FFF7F7F7 #FF2E2E2E 00000018
SystemFillSolidNeutral Relleno de indicador neutro sólido #FF8A8A8A #FF8A8A8A 00000002
SystemFillSolidNeutralBackground Fondo neutro sólido #FFF3F3F3 #FF2E2E2E 00000018
SystemFillSuccess Borde y trazo del indicador correcto #FF0F7B0F #FF6CCB5F 00000002
SystemFillSuccessBackground Fondo del indicador de éxito #FFDFF6DD #FF393D1B 00000018

Texto

Token Descripción Claro Oscuro Contraste alto
TextFillDisabled Color de texto deshabilitado #5C000000 #5DFFFFFF 00000011
TextFillPrimary Color de texto principal para contenido general #E4000000 #FFFFFFFF 00000008
TextFillSecondary Color de texto secundario para contenido y sugerencias adicionales #9E000000 #C8FFFFFF 00000008
TextFillTertiary Color de texto terciario (contraste bajo: no se usa para el contenido principal en reposo) #72000000 #8BFFFFFF 00000008
TextOnAccentFillDisabled Texto deshabilitado en fondos de énfasis #B2FFFFFF #80000000 00000003
TextOnAccentFillPrimary Texto principal sobre fondos de énfasis #FFFFFFFF #FF000000 0000000E
TextOnAccentFillSecondary Texto secundario en fondos de énfasis #B2FFFFFF #80000000 0000000E
TextOnAccentFillSelectedText Color de texto para el texto seleccionado en fondos de énfasis #FFFFFFFF #FFFFFFFF 0000000E

Colores internos de Shell

Estos tokens controlan las superficies de cromo del IDE: el marco de ventana principal, los encabezados de ventana de herramientas, las pestañas, la barra de estado y otros elementos de nivel de shell. Son los autores de temas de tokens principales que usan para cambiar la sensación general del IDE.

Visual Studio agrega tokens de color fluent a medida que las áreas de shell se vuelven más granulares. Pueden aparecer tokens adicionales para superficies de cromo, como encabezados de pestaña y encabezados de ventana, por lo que los autores de temas pueden aplicar estilos a esas áreas independientemente del cromo de otro shell.

Medio ambiente

Tokens que controlan las superficies de cromo de la ventana principal y del shell.

Token Descripción Claro Oscuro Contraste alto
EnvironmentBackground Ventana principal en segundo plano y ventanas de herramientas flotantes #FFEEEEEE #FF1C1C1C 00000005
EnvironmentBadge Fondo del distintivo de información de la solución (por ejemplo, indicador de Live Share) #B2FFFFFF #0FFFFFFF 0000000F
EnvironmentBody Fondo del área de cuerpo y contenido de la ventana principal del shell #FFEEEEEE #FF1C1C1C 00000005
EnvironmentBodyText Color de texto en el área de cuerpo o contenido de la ventana principal del shell #E4000000 #FFFFFFFF 00000008
EnvironmentBorder Borde de ventana principal activo #FF5649B0 #FF9184EE 0000000A
EnvironmentBorderInactive Borde de ventana principal inactivo y divisores internos #FFADADAD #FF454545 00000003
EnvironmentHeader Fondo de encabezado de ventana activa o ventana de herramientas, independiente de los fondos de tabulación #FFF9F9F9 #FF282828 00000005
EnvironmentHeaderInactive Fondo de encabezado de ventana inactiva o ventana de herramientas, independiente de los fondos de tabulación #FFF9F9F9 #FF282828 00000005
EnvironmentIndicator Borde o indicador para pestañas ocultas automáticamente #66757575 #66757575 0000000A
EnvironmentLayeredBackground Fondo de elementos superpuestas, como InfoBars y grupos de pestañas #80FFFFFF #4D3A3A3A 00000005
EnvironmentLayeredBorder Borde de elementos superpuestas, como InfoBars y distintivos #0F000000 #80000000 00000010
EnvironmentLogo Visual Studio logotipo rellena el menú del sistema #FF5649B0 #FF9184EE 0000000D
EnvironmentTab Fondo del encabezado de pestaña activo, independiente de los encabezados de ventana y ventana de herramientas #FFF9F9F9 #FF282828 00000005
EnvironmentTabInactive Fondo de encabezado de tabulación inactivo, independiente de los encabezados de ventana y ventana de herramientas #FFF9F9F9 #FF282828 00000005

Caption

Tokens para el botón cerrar ventana específicamente.

Token Descripción Claro Oscuro Contraste alto
CaptionControlCloseFillPrimary Cerrar fondo del botón (mantener el puntero) #FFC42B1C #FFC42B1C 0000000D
CaptionControlCloseFillSecondary Cerrar fondo del botón (presionado) #E6C42B1C #E6C42B1C 0000000D
CaptionControlCloseTextFillPrimary Color del icono cerrar del botón (mantener el puntero) #FFFFFFFF #FFFFFFFF 00000009
CaptionControlCloseTextFillSecondary Color del icono cerrar del botón (presionado) #B3FFFFFF #B3FFFFFF 00000009

Barra de estado

Tokens para la barra de estado en sus diferentes modos.

Token Descripción Claro Oscuro Contraste alto
StatusBarBackgroundFillBuilding Fondo de la barra de estado al compilar #FF5649B0 #FF3F3682 00000005
StatusBarBackgroundFillDebugging Fondo de la barra de estado al depurar #FFBC4B09 #FF7A2101 00000005
StatusBarBackgroundFillRest Fondo de la barra de estado en estado predeterminado #8B000000 #4D000000 00000005
StatusBarBackgroundFillSolutionLoading Fondo de la barra de estado al cargar una solución #FF005BA1 #FF003B6A 00000005
StatusBarControlFillSecondary Relleno del control secundario en la barra de estado #33000000 #20FFFFFF 0000000E
StatusBarTextFillBuilding Texto de la barra de estado al compilar #FFFFFFFF #FFFFFFFF 00000008
StatusBarTextFillDebugging Texto de la barra de estado al depurar #FFFFFFFF #FFFFFFFF 00000008
StatusBarTextFillDisabled Texto de la barra de estado deshabilitado #90FFFFFF #5DFFFFFF 00000011
StatusBarTextFillRest Texto de la barra de estado en estado predeterminado #FFFFFFFF #FFFFFFFF 00000008
StatusBarTextFillSolutionLoading Texto de la barra de estado al cargar una solución #FFFFFFFF #FFFFFFFF 00000008

Referencia de color del sistema de contraste alto

Los valores de contraste alto son índices de color del sistema. Visual Studio asigna estos elementos a la combinación de colores activa de contraste alto del usuario. Índices comunes:

Índice Color del 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