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

Ytterligare fluent-semantiska token ger mer detaljerad kontroll över skalområden. Till exempel gör tokenen EnvironmentHeader och EnvironmentTab det möjligt för temaskapare att färgsätta fönster- och flikrubriker oberoende av övriga delar av skalets gränssnitt.

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.

Anpassa token i Visual Studio

Visual Studio 2026 (18.7) lägger till en sida med temafärger i IDE för interaktiv anpassning av temafärger. Använd kommandot Redigera temafärger eller öppna Verktyg > Alternativ > Miljö > Visual Experience > Temafärger för att visa färgtoken för Fluent-tema för det aktiva temat i ett sökbart rutnät. Ändringarna gäller live, så du kan justera token utan att installera ett tillägg, redigera JSON eller starta om Visual Studio.

Sidan visar samma semantiska token som temaförfattare definierar i ett temapaket, inklusive token för redigerare, verktygsfönster och gränssnittsytor. Du kan söka efter token och återställa enskilda värden medan du verifierar hur ditt migrerade tema svarar på tokenändringar.

Åsidosättningar av temafärg sparas för det valda temat och tillämpas som ett lager ovanpå bastemat. Om du byter teman ändras vilka åsidosättningsuppsättningar som är aktiva. Dessa beteenden är användbara när du verifierar semantiska token eller anpassar några värden utan att skapa ett fullständigt temapaket. Om användarna åsidosätter tokenvärden efter att ha installerat ett tema återställer återställningen av dessa token de värden som tillhandahålls av temat.

Om du vill dela åsidosättningar för tema placerar du en JSON-fil med temanamnet i %LOCALAPPDATA%\Microsoft\VisualStudio\18.0_xxxxxxxx\ColorThemes. Visual Studio tillämpar filbaserade ändringar när du har startat om IDE:t.

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 de föregående tematokenerna. 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.

Uppdaterades senast 2026-09-02