Modernisera Visual Studio-temafärger

Visual Studio-teman förlitade sig tidigare på detaljerade, funktionsspecifika färgtoken. Med tiden skapade den här metoden tusentals skräddarsydda värden och anpassade färger, vilket gör konsekvens och tillgänglighet svårare att garantera. För att åtgärda detta återskapade vi systemet kring tydliga designprinciper: färre semantiska token för enklare underhåll, förutsägbara färgramper för hållbar tillgänglighet och en mer sammanhängande upplevelse i Visual Studio, Windows-plattformen och andra Microsoft-verktyg.

Den här artikeln förklarar vad som har ändrats och hur du migrerar tidigare teman så att de är kompatibla med Visual Studio 2026.

Vad har ändrats

Före Visual Studio 2022 innehöll ett out-of-box Visual Studio-tema cirka 34 kategorier och ~1 806 färgtoken. Tillägg lade ofta till mer. Den här densiteten skapade några utmaningar:

Många token var nästan identiska och skilde sig bara något åt i nyans eller ljusstyrka, vilket ledde till visuell oreda och förvirring.
Enskilda funktioner (till exempel CodeAnalysis, Diagnostics, ManifestDesigner osv.) skapade sina egna unika token, vilket resulterade i fragmenterad och inkonsekvent färganvändning.
Det var svårt att verifiera färgkontrast för tillgänglighet på grund av det stora antalet anpassade poster.
Den övergripande användarupplevelsen blev inkonsekvent, med ytor som verkade felmatchade eller osynkroniserade.

Här är ett exempel på kategorier och färgtoken från ett Visual Studio 2022-tema:

<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 konsoliderar markörer till en handfull väl definierade avsiktsförsta kategorier med förutsägbara namngivningshierarkier. Ett out-of-box-gränssnittstema innehåller nu bara fyra toppnivåkategorier och 229 färgtoken – en minskning med ~87%.

Här är ett exempel på semantiska, avsiktsinriktade token från ett Visual Studio 2026-tema:

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

Varför färre token låser upp bättre UX

Avsiktsnamngivning: Tokennamn återspeglar tydligt deras roll (t.ex. ControlFill, TextFill, AccentFill, Stroke, SystemFill) och nivå (primär, sekundär, tertiär), vilket gör användningen intuitiv.
Förenklad palett: Att uppdatera en liten uppsättning delade token förbättrar omedelbart konsekvens i gränssnittet och tilläggen.
Större konsekvens: Färre anpassningspunkter innebär färre oavsiktliga felmatchningar och eliminerar små variationer.
Förbättrad tillgänglighet: Centraliserade färgramper och semantiska tillstånd (Success, Caution, Critical, Attention) gör kontrastverifieringen enklare och mer tillförlitlig.
Bättre prestanda och underhåll: Semantiska lager ersätter detaljerade färgsättare, vilket minskar underhållskostnaderna och förbättrar användargränssnittskvaliteten.

Migrera teman till Visual Studio 2026

Du kan göra ett tidigare tema kompatibelt med Visual Studio 2026 genom att slå samman dess befintliga token med en liten uppsättning nya semantiska token. Du behöver inte återskapa varje tidigare token. Visual Studio 2026 läser de nya token först och återgår sedan till tidigare token. Så här gör du:

Lägg till FallbackId="{Light or Dark theme GUID}" objekt i objektet <Theme /> .

Tema att basera på	FallbackId
Light	{de3dbbcd-f642-433c-8353-8f1df4370aba}
Mörk	{1ded0138-47ce-435e-84ef-9ec1f439b749}

Lägg till nedanstående uppsättning token som de två sista kategorierna efter föregående tematoken. Kontrollera att kategorinamnet och GUID kopieras exakt som nedan.

Minimal tokenuppsättningsstart för ett ljusbaserat tema

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

Minimal tokenuppsättningsstart för ett mörkbaserat tema

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

Justera färgvärdena så att de passar föregående tema efter behov.

Vanliga frågor

Varför innebar detta en icke-bakåtkompatibel förändring?

Förutom ändringar i struktur och namngivning av temafärgtokens har majoriteten av användargränssnittskoden omstrukturerats för att använda semantiska stiliserings-tokens från Fluent Design Systemet, istället för tidigare funktionsinriktade tokens eller infogade format. De flesta av de gamla färg- och andra formatresurserna finns kvar i SDK:t, men de kanske inte återspeglar den senaste designen eller beter sig konsekvent i det moderniserade användargränssnittet.

Kan jag fortsätta använda tidigare token?

Tidigare token kan fortfarande matchas för vissa tidigare ytor, men nya och omstrukturerade användargränssnittssökvägar läser de nya semantiska token först. Om du förlitar dig på inaktuella token riskerar du ofullständiga teman.

Var är det klassiska blå temat?

Vi ersatte den med en familj med tonade teman och alternativ för extrakontrastredigerarens utseende. Du kan också installera communityns Blue Steel-tema om du vill ha en närmare hyllning.

Innebär färre token mindre anpassning?

Nej---semantiska nivåer låter dig skapa breda visuella skift genom att justera en liten palett. Du kan fortfarande skapa distinkta personligheter via accentfärg, bakgrundsluminanssteg och systemfyllningar.

Prestandapåverkan?

Refaktorn minskar stilsökningar och redundanta resurser, förbättrar minneslokaliteten och förenklar skapande av uppskjuten pensel.

Ändras även redigeringsfärgerna?

Redigeraren behåller för närvarande det mesta av sin syntaxfärgning. Den här ändringen riktar sig till delade gränssnittsytor som verktygsfönster, menyer och dialogrutor. Du kan välja redigeringsutseende (inklusive extra kontrast) oberoende.

Last updated on 2025-11-20