Visual Studio-themakleuren moderniseren

Visual Studio-thema's waren eerder afhankelijk van gedetailleerde, functiespecifieke kleurtokens. Na verloop van tijd heeft deze benadering duizenden op maat gemaakte waarden en aangepaste kleuren geproduceerd, waardoor consistentie en toegankelijkheid moeilijker te garanderen zijn. Hiervoor hebben we het systeem herbouwd rond duidelijke ontwerpprincipes: minder semantische tokens voor eenvoudiger onderhoud, voorspelbare kleur ramps voor duurzame toegankelijkheid en een samenhangendere ervaring in Visual Studio, het Windows-platform en andere Microsoft-hulpprogramma's.

In dit artikel wordt uitgelegd wat er is gewijzigd en hoe u eerdere thema's migreert zodat deze compatibel zijn met Visual Studio 2026.

Wat is er veranderd

Vóór Visual Studio 2022 bevatte een standaard Visual Studio-thema ongeveer 34 categorieën en ~1806 kleurentokens. Extensies voegden vaak meer toe. Deze dichtheid heeft enkele uitdagingen gecreëerd:

Veel tokens waren bijna identiek en verschilden slechts enigszins in tint of helderheid, wat leidde tot visuele rommel en verwarring.
Afzonderlijke functies (zoals CodeAnalysis, Diagnostics, ManifestDesigner, enzovoort) hebben hun eigen unieke tokens gemaakt, wat resulteert in gefragmenteerd en inconsistent kleurgebruik.
Het controleren van kleurcontrast voor toegankelijkheid was lastig vanwege het grote aantal aangepaste vermeldingen.
De algehele gebruikerservaring werd inconsistent, waarbij oppervlakken niet overeenkwamen of niet synchroon liepen.

Hier volgt een voorbeeld van categorieën en kleurtokens van een Visual Studio 2022-thema:

<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 voegt tokens samen in een handvol intentie-gebaseerde categorieën met voorspelbare naamgevingsniveaus. Een out-of-box shell-thema bevat nu slechts vier categorieën op het hoogste niveau en 229 kleurtokens: een reductie van ongeveer 87%.

Hier volgt een voorbeeld van semantische, intent-first-tokens van een Visual Studio 2026-thema:

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

Waarom minder tokens betere UX ontgrendelen

Intentie-gericht naamgeving: Tokennamen weerspiegelen duidelijk hun rol (bijvoorbeeld ControlFill, TextFill, AccentFill, Stroke, SystemFill) en niveau (Primair, Secundair, Tertiair), waardoor het gebruik intuïtief wordt.
Vereenvoudigd palet: Als u een kleine set gedeelde tokens bijwerkt, wordt de consistentie in zowel de shell als extensies onmiddellijk verbeterd.
Grotere consistentie: Minder aanpassingspunten betekenen minder onopzettelijke verschillen en elimineren iets verschillende varianten.
Verbeterde toegankelijkheid: Gecentraliseerde kleur ramps en semantische toestanden (geslaagd, waarschuwing, kritiek, aandacht) maken contrastvalidatie eenvoudiger en betrouwbaarder.
Betere prestaties en onderhoudbaarheid: Semantische lagen vervangen gedetailleerde kleurensetters, waardoor de overhead van het onderhoud wordt verminderd en de kwaliteit van de gebruikersinterface wordt verbeterd.

Thema's migreren naar Visual Studio 2026

U kunt een eerder thema compatibel maken met Visual Studio 2026 door de bestaande tokens samen te voegen met een kleine set nieuwe semantische tokens. U hoeft niet elke vorige token opnieuw te maken. Visual Studio 2026 leest eerst de nieuwe tokens en valt vervolgens terug op eerdere tokens. Dit doet u als volgt:

Voeg een object toe FallbackId="{Light or Dark theme GUID}" aan het <Theme /> object.

Te baseren thema op	FallbackId
Light	{de3dbbcd-f642-433c-8353-8f1df4370aba}
Donker	{1ded0138-47ce-435e-84ef-9ec1f439b749}

Voeg de onderstaande set tokens toe als de laatste twee categorieën na de vorige thematokens. Zorg ervoor dat de categorienaam en GUID precies zoals hieronder zijn gekopieerd.

Minimale tokenset starter voor een op licht gebaseerd thema

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

Minimale token set starter voor een donker thema

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

Pas de kleurwaarden zo nodig aan op het vorige thema.

Veelgestelde vragen

Waarom was dit een belangrijke wijziging?

Naast wijzigingen in themakleurentokens en de naamconventie is de meeste UI-code geherstructureerd om gebruik te maken van semantische stijltokens uit het Fluent Ontwerp-systeem, in plaats van eerdere tokens met functiebereik of inline stijlen. Hoewel de meeste oude kleur- en andere stijlbronnen aanwezig blijven in de SDK, weerspiegelen ze mogelijk niet het nieuwste ontwerp of gedragen ze zich consistent in de gemoderniseerde gebruikersinterface.

Kan ik de vorige tokens blijven gebruiken?

Eerdere tokens kunnen nog steeds worden opgelost voor een aantal eerdere oppervlakken, maar nieuwe en herstructureerde UI-paden lezen eerst de nieuwe semantische tokens. Als u afhankelijk bent van afgeschafte tokens, riskeert u onvolledige thema's.

Waar is het klassieke blauwe thema?

We hebben het vervangen door een reeks getint thema's en opties voor extra contrasteditorweergaven. U kunt ook het thema Community Blue Steel installeren als u een dichtere hommage wilt.

Betekenen minder tokens minder aanpassing?

Met no---semantische lagen kunt u brede visuele verschuivingen maken door een klein palet aan te passen. U kunt nog steeds unieke persoonlijkheden maken via accenttinten, achtergrondhelderheidsstappen en systeemvullingen.

Invloed op de prestaties?

De herstructurering vermindert het opzoeken van stijlen en redundante resources, verbetert de geheugenlokaliteit en vereenvoudigt de vertraagde penseelcreatie.

Worden editorkleuren ook gewijzigd?

De editor behoudt momenteel de meeste syntaxiskleuring. Deze wijziging is gericht op shell ui gedeelde oppervlakken, zoals toolvensters, menu's en dialoogvensters. U kunt de weergave van de editor (inclusief extra contrast) onafhankelijk kiezen.

Last updated on 2025-11-20

Delen via