Modernización de los colores del tema de Visual Studio

Los temas de Visual Studio anteriormente se basaban en tokens de color granulares específicos de características. Con el tiempo, este enfoque produjo miles de valores personalizados y colores personalizados, lo que dificulta la coherencia y la accesibilidad. Para solucionar esto, hemos vuelto a compilar el sistema en torno a principios de diseño claros: menos tokens semánticos para un mantenimiento más sencillo, rampas de color predecibles para una accesibilidad sostenible y una experiencia más coherente en Visual Studio, la plataforma Windows y otras herramientas de Microsoft.

En este artículo se explica qué ha cambiado y cómo migrar temas anteriores para que sean compatibles con Visual Studio 2026.

Qué ha cambiado

Antes de Visual Studio 2022, un tema de Visual Studio predefinido incluía aproximadamente 34 categorías y ~1806 tokens de color. Las extensiones a menudo añaden más. Esta densidad creó algunos desafíos:

Muchos tokens eran casi idénticos, diferiendo solo ligeramente en tono o brillo, lo que conduce a desorden visual y confusión.
Las características individuales (como CodeAnalysis, Diagnostics, ManifestDesigner, etc.) crearon sus propios tokens únicos, lo que da lugar a un uso de color fragmentado e incoherente.
Comprobar el contraste de color para la accesibilidad era difícil debido al gran número de entradas personalizadas.
La experiencia general del usuario se volvió incoherente, con las superficies que aparecen desajustadas o no sincronizadas.

Este es un ejemplo de categorías y tokens de color de un tema de 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>

Visual Studio 2026 consolida los tokens en una serie de categorías basadas en la intención con niveles de nomenclatura predecibles. Un tema de shell listo para usar ahora contiene solo cuatro categorías de nivel superior y 229 fichas de color, una reducción de ~87 %.

Los tokens semánticos de Fluent adicionales proporcionan un control más granular sobre las áreas de shell. Por ejemplo, los tokens EnvironmentHeader y EnvironmentTab permiten a los autores de temas colorear de forma independiente los encabezados de la ventana y de las pestañas respecto de otros elementos de la interfaz del shell.

Este es un ejemplo de tókenes de intención prioritaria y semánticos de un tema de Visual Studio 2026.

<Theme ...>
<Category Name="Shell">
...
   <Color Name="ControlFillSecondary"> ... </Color>
   <Color Name="TextFillPrimary"> ... </Color>
   <Color Name="SolidBackgroundFillBase"> ... </Color>
...
</Category>
</Theme>

¿Por qué menos tokens desbloquean mejor la experiencia de usuario?

Nomenclatura inicial de la intención: Los nombres de token reflejan claramente su rol (por ejemplo, ControlFill, TextFill, AccentFill, Stroke, SystemFill) y nivel (Principal, Secundario, Terciario), lo que hace que el uso sea intuitivo.
Paleta simplificada: La actualización de un pequeño conjunto de tokens compartidos mejora instantáneamente la coherencia tanto en el shell como en las extensiones.
Mayor coherencia: Menos puntos de personalización significan menos coincidencias accidentales y eliminan variantes ligeramente diferentes.
Accesibilidad mejorada: Las rampas de color centralizadas y los estados semánticos (Éxito, Precaución, Crítico, Atención) facilitan y hacen más confiable la validación del contraste.
Mejor rendimiento y capacidad de mantenimiento: Las capas semánticas reemplazan los establecedores de color pormenorizados, lo que reduce la sobrecarga de mantenimiento y mejora la calidad de la interfaz de usuario.

Personalización de tokens en Visual Studio

Visual Studio 2026 (18.7) agrega una página de opciones de colores de tema en IDE para personalizar el color del tema interactivo. Use el comando Editar colores del tema o abra Herramientas > Opciones > Entorno > Experiencia visual > Colores del tema para ver los tokens de color del tema Fluent para el tema activo en una cuadrícula con función de búsqueda. Los cambios se aplican en directo, por lo que puede ajustar los tokens sin instalar una extensión, editar JSON o reiniciar Visual Studio.

La página expone los mismos tókenes semánticos que los autores de temas definen en un paquete de temas, incluidos los tókenes para las superficies de editor, ventana de herramientas y shell. Puede buscar tokens y restablecer valores individuales mientras valida cómo responde el tema migrado a los cambios de token.

Las anulaciones del color del tema se guardan para el tema seleccionado y se aplican como una capa superpuesta al tema base. Cambiar de tema cambia qué conjunto de anulaciones está activo. Estos comportamientos son útiles al validar tokens semánticos o personalizar algunos valores sin crear un paquete de tema completo. Si los usuarios sobrescriben los valores de los tokens después de instalar un tema, al restablecer esos tokens se restauran los valores proporcionados por el tema.

Para compartir anulaciones del tema, coloque un archivo JSON con el nombre del tema en %LOCALAPPDATA%\Microsoft\VisualStudio\18.0_xxxxxxxx\ColorThemes. Visual Studio aplica cambios basados en archivos después de reiniciar el IDE.

Migración de temas a Visual Studio 2026

Puede hacer que un tema anterior sea compatible con Visual Studio 2026 mediante la combinación de sus tokens existentes con un pequeño conjunto de nuevos tokens semánticos. No es necesario volver a crear todos los tokens anteriores. Visual Studio 2026 lee primero los nuevos tokens y, a continuación, vuelve a los tokens anteriores. Así es como:

Añada el objeto FallbackId="{Light or Dark theme GUID}" al objeto <Theme />.

Tema en el que se basa	FallbackId
Ligero	{de3dbbcd-f642-433c-8353-8f1df4370aba}
Oscuro	{1ded0138-47ce-435e-84ef-9ec1f439b749}

Anexe el siguiente conjunto de tokens como las dos últimas categorías después de los tokens de tema anteriores. Asegúrese de que el nombre de categoría y el GUID se copian exactamente como se indica a continuación.

Conjunto de tokens mínimo de inicio para un 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>

Inicio mínimo del conjunto de tókenes para un tema basado en la oscuridad

<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 los valores de color para que se ajusten al tema anterior según sea necesario.

Preguntas más frecuentes

¿Por qué fue un cambio importante?

Además de los cambios en la estructura de los tókenes de color del tema y las convenciones de nomenclatura, la mayoría del código de la interfaz de usuario se ha refactorizado para usar tókenes de estilo semántico del sistema de Fluent Design, en lugar de tókenes con alcance de características anteriores o estilos en línea. Aunque la mayoría de los colores antiguos y otros recursos de estilo permanecen presentes en el SDK, es posible que no reflejen el diseño más reciente ni se comporten de forma coherente en la interfaz de usuario modernizada.

¿Puedo seguir usando los tokens anteriores?

Los tókenes anteriores pueden seguir resolviendo algunas superficies anteriores, pero las rutas de acceso de interfaz de usuario nuevas y refactorizaciones leen primero los nuevos tókenes semánticos. Si confía en tokens obsoletos, corre el riesgo de que se produzca una tematización incompleta.

¿Dónde está el tema azul clásico?

Lo reemplazamos por una familia de temas de colores y opciones de apariencia del editor con contraste adicional. También puedes instalar el tema Blue Steel de la comunidad si quieres un homenaje más cercano.

¿Menos tokens significan menos personalización?

Los niveles no---semánticos permiten crear cambios visuales amplios ajustando una paleta pequeña. Todavía puede crear personalidades distintas mediante el tono de énfasis, los niveles de luminancia en segundo plano y los rellenos del sistema.

¿Impacto en el rendimiento?

La refactorización reduce las búsquedas de estilo y los recursos redundantes, lo que mejora la localidad de memoria y simplifica la creación diferida de pinceles.

¿También cambian los colores del editor?

El editor conserva actualmente la mayor parte de su colorización de sintaxis. Este cambio tiene como destino superficies compartidas de interfaz de usuario de shell, como ventanas de herramientas, menús y diálogos. Puede elegir la apariencia del editor (incluido el contraste adicional) independientemente.

Last updated on 2026-09-07