Moderniser les couleurs du thème Visual Studio

Les thèmes Visual Studio s’appuyaient précédemment sur des jetons de couleur précis et spécifiques aux caractéristiques. Au fil du temps, cette approche a produit des milliers de valeurs personnalisées et de couleurs personnalisées, ce qui rend la cohérence et l’accessibilité plus difficiles à garantir. Pour résoudre ce problème, nous avons reconstruit le système autour de principes de conception clairs : moins de jetons sémantiques pour une maintenance plus facile, des rampes de couleurs prévisibles pour une accessibilité durable et une expérience plus cohérente dans Visual Studio, la plateforme Windows et d’autres outils Microsoft.

Cet article explique ce qui a changé et comment migrer les thèmes précédents pour être compatibles avec Visual Studio 2026.

Ce qui a changé

Avant Visual Studio 2022, un thème Visual Studio prête à l’emploi comprenait environ 34 catégories et environ 1 806 jetons de couleur. Les extensions ajoutaient souvent davantage. Cette densité a créé quelques défis :

De nombreux jetons étaient presque identiques, ne diffèrent que légèrement en teinte ou luminosité, ce qui entraîne un encombrement visuel et une confusion.
Les fonctionnalités individuelles (telles que CodeAnalysis, Diagnostics, ManifestDesigner, etc.) ont créé leurs propres jetons uniques, ce qui entraîne une utilisation fragmentée et incohérente des couleurs.
La vérification du contraste des couleurs pour l’accessibilité était difficile en raison du grand nombre d’entrées personnalisées.
L’expérience utilisateur globale est devenue incohérente, avec des surfaces apparaissant incompatibles ou hors synchronisation.

Voici un exemple de catégories et de jetons de couleur à partir d’un thème 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 consolide les jetons en quelques catégories orientées vers l'intention, avec des niveaux de dénomination prévisibles. Un thème de shell prêt à l'emploi ne contient désormais que quatre catégories de niveau supérieur et 229 jetons de couleur, une réduction d’environ 87%.

Voici un exemple de jetons orientés par l'intention sémantique dans un thème Visual Studio 2026 :

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

Pourquoi moins de jetons déverrouillent une meilleure expérience utilisateur

Nommer d'abord selon l'intention : Les noms de jetons reflètent clairement leur rôle (par exemple, ControlFill, TextFill, AccentFill, Stroke, SystemFill) et l'étage (Principal, Secondaire, Tertiaire), ce qui rend l'utilisation intuitive.
Palette simplifiée : La mise à jour d’un petit ensemble de jetons partagés améliore instantanément la cohérence entre l’interpréteur de commandes et les extensions.
Cohérence accrue : Moins de points de personnalisation signifient moins d’incompatibilités accidentelles et éliminent des variantes légèrement différentes.
Accessibilité améliorée : Les rampes de couleurs centralisées et les états sémantiques (Réussite, Attention, Critique, Attention) facilitent la validation du contraste et sont plus fiables.
Meilleures performances et facilité de maintenance : Les couches sémantiques remplacent les setters de couleurs granulaires, ce qui réduit la surcharge de maintenance et améliore la qualité de l’interface utilisateur.

Migrer des thèmes vers Visual Studio 2026

Vous pouvez rendre un thème précédent compatible avec Visual Studio 2026 en fusionnant ses jetons existants avec un petit ensemble de nouveaux jetons sémantiques. Vous n’avez pas besoin de recréer chaque jeton précédent. Visual Studio 2026 lit d’abord les nouveaux jetons, puis revient aux jetons précédents. Voici comment :

Ajoutez un FallbackId="{Light or Dark theme GUID}" objet à l’objet <Theme /> .

Thème sur lequel baser	FallbackId
Light	{de3dbbcd-f642-433c-8353-8f1df4370aba}
Sombre	{1ded0138-47ce-435e-84ef-9ec1f439b749}

Ajoutez l’ensemble de jetons ci-dessous en tant que deux dernières catégories après les jetons de thème précédents. Vérifiez que le nom de la catégorie et le GUID sont copiés exactement comme indiqué ci-dessous.

Starter d'ensemble minimal de jetons pour un thème basé sur la lumière

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

Ensemble de jetons minimal pour commencer avec un thème sombre

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

Ajustez les valeurs de couleur pour qu’elles correspondent au thème précédent en fonction des besoins.

Questions fréquentes (FAQ)

Pourquoi cela a-t-il été un changement de rupture ?

Outre les modifications apportées à la structure des tokens de couleur de thème et à la convention d’affectation de noms, la plupart du code de l’interface utilisateur a été refactorisé pour utiliser des jetons de style sémantique issus du système Fluent Design, au lieu des tokens spécifiques aux fonctionnalités précédentes ou des styles en ligne. Bien que la plupart des anciennes couleurs et autres ressources de style restent présentes dans le Kit de développement logiciel (SDK), elles peuvent ne pas refléter la conception la plus récente ou se comporter de manière cohérente dans l’interface utilisateur modernisée.

Puis-je continuer à utiliser les jetons précédents ?

Les jetons précédents peuvent toujours être résolus pour certaines surfaces antérieures, mais les chemins d’interface utilisateur nouveaux et refactorisés lisent d’abord les nouveaux jetons sémantiques. Si vous vous appuyez sur des jetons déconseillés, vous risquez d'avoir une thématisation incomplète.

Où est le thème bleu classique ?

Nous l'avons remplacé par une famille de thèmes teintés ainsi que des options d'apparence de l'éditeur à contraste augmenté. Vous pouvez également installer le thème Blue Steel de la communauté si vous souhaitez un hommage plus proche.

Moins de jetons signifient-ils moins de personnalisation ?

Non --- les niveaux sémantiques vous permettent de créer des changements visuels significatifs en ajustant une petite palette. Vous pouvez toujours créer des personnalités distinctes avec des teintes accentuées, des étapes de luminosité d’arrière-plan et des remplissages système.

Impact sur les performances ?

La refactorisation réduit les recherches de style et les ressources redondantes, améliore la localité de la mémoire et simplifie la création de pinceau différé.

Les couleurs de l’éditeur changent-elles aussi ?

L’éditeur conserve actuellement la majeure partie de sa coloration syntaxique. Cette modification cible les surfaces partagées de l’interface utilisateur de l’interpréteur de commandes, telles que les fenêtres d’outils, les menus et les boîtes de dialogue. Vous pouvez choisir l’apparence de l’éditeur (y compris Contraste supplémentaire) indépendamment.

Last updated on 2025-11-20

Partager via