Compartir a través de

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

Este es un ejemplo de tokens 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.

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:

  1. Agregue FallbackId="{Light or Dark theme GUID}" el objeto en el <Theme /> objeto .
Tema en el que se basa FallbackId
Ligero {de3dbbcd-f642-433c-8353-8f1df4370aba}
Oscuro {1ded0138-47ce-435e-84ef-9ec1f439b749}
  1. 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 tokens 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>
  1. 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 tokens 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 tokens de estilo semántico del sistema de diseño Fluent, en lugar de tokens 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 tokens anteriores pueden seguir resolviendo algunas superficies anteriores, pero las rutas de acceso de interfaz de usuario nuevas y refactorizaciones leen primero los nuevos tokens 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---semantic 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 de fondo 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