Visual Studio färgtoken för tema

Visual Studio använder semantiska färgtoken för att definiera utseendet på varje gränssnittsyta. Dessa token ingår i fluent-designsystemet som introducerades i Visual Studio 2026. I stället för att referera till specifika hexfärger refererar varje kontroll och yta till en namngiven token. Teman ger värden för dessa token och hela IDE uppdateras därefter.

Den här referensen visar alla tillgängliga temafärgtoken, dess avsedda användning och dess standardvärden i temana Ljus, Mörk och Högkontrast. Använd den här referensen när du skapar anpassade teman eller åsidosättar enskilda token i inställningarna eller via redigeraren Temafärger .

Anpassa temafärger i Visual Studio

Visual Studio 2026 (18.7) innehåller en sida med temafärger i produkten för anpassning av Fluent-temafärgtoken. Använd kommandot Redigera temafärger eller öppna Verktyg > Alternativ > Miljö > Visual Experience > Temafärger. Sidan visar token för det aktiva temat i ett sökbart rutnät.

Välj en token och välj en färg för att tillämpa ändringen omedelbart. Du kan återställa en enskild token utan att ta bort dina andra anpassningar. Åsidosättningar sparas separat för varje tema och läggs ovanpå det valda temat, så om du byter teman växlas även de åsidosättningar som sparats för det temat. Beroende på tillgängliga token kan du anpassa redigerarfärger, verktygsfönster, gränssnittskrom, flikrubriker, fönsterrubriker och interaktionstillstånd som hovringsfärger.

Bredare inställningar för slutanvändarutseende finns i Ändra teckensnitt, färger och teman i Visual Studio.

Åsidosättning av delningstema

Om du vill dela token åsidosättningar placerar du en JSON-fil i %LOCALAPPDATA%\Microsoft\VisualStudio\18.0_xxxxxxxx\ColorThemes. Filnamnet måste matcha temat som ska åsidosättas. Till dark.json exempel åsidosätter det mörka temat. Starta om Visual Studio för att tillämpa filbaserade åsidosättningar på matchande tema.

Så här fungerar tematoken

Varje token är ett semantiskt namn som mappar till ett färgvärde. Token är ordnade i två kategorier:

  • Shell (ShellColors) – token för vanliga kontroller och ytor, härledda från designsystemet Windows 11 Fluent. Dessa omslagsknappar, textrutor, bakgrunder, kantlinjer, statusindikatorer med mera. Använd dessa token för allmän formatering av användargränssnittet.
  • Shell internal (ShellInternalColors) – token för IDE Chrome-ytor som huvudfönstret, namnlisten, statusfältet och verktygsfönstrets sidhuvuden. Dessa exponeras för åsidosättningar av tema men är inte avsedda för formatering av tilläggskontroll.

Format för färgvärde

Färger anges i #AARRGGBB format (alfa, röd, grön, blå). Till exempel #B2FFFFFF är vit vid ~70% opacitet.

Högkontrastvärden är systemfärgindex (till exempel 00000008 = WindowText). Visual Studio löser dessa med användarens aktuella högkontrastfärgschema vid körning.

Åsidosättningsbeteende

Tokenvärden som tillhandahålls av tema är basvärdena för det valda temat. När en användare ändrar en token i redigeraren Temafärger använder Visual Studio värdet som ett åsidosättningslager ovanpå det valda temat. Om du tar bort eller återställer en enskild åsidosättning återställs token till det valda temats basvärde utan att andra åsidosättningar påverkas.

Gränssnittsfärger

Dessa token utformar vanliga kontroller och ytor över Visual Studio. De följer samma namngivningskonventioner som Windows 11 Fluent-temaresurser.

Accent

Token för dekorfärgade element som primära knappar, markerade kryssrutor och aktiva indikatorer.

Token Description Light Mörk Högkontrast
AccentFillAlt Alternativ accentbakgrund, som används när en annan nyans än Standard krävs #FF3F3682 #FFD2CCF8 0000000D
AccentFillDefault Standardbakgrund för dekorfärg för interaktiva element, anrop till åtgärd och valda tillstånd #FF5649B0 #FF9184EE 0000000D
AccentFillDisabled Inaktiverad accentbakgrund #37000000 #28FFFFFF 00000010
AccentFillSecondary Dekorfärgsbakgrund som anger hovringstillstånd #E55649B0 #E59184EE 0000000D
AccentFillSelectedTextBackground Bakgrund för markerad text i aktiva textfält #FF0078D4 #FF005FB7 0000000D
AccentFillSelectedTextBackgroundSubtle Diskret markerad textbakgrund, som används när förgrundstextfärg inte kan inverteras #4D0078D4 #6660CDFF 0000000D
AccentFillSenary Diskret accentbakgrund för tillstånd bortom Tertiary #1F5649B0 #1F9184EE 0000000E
AccentFillTertiary Dekorfärgsbakgrund som anger pressat tillstånd #CC5649B0 #CC9184EE 0000000D
AccentTextFillDisabled Inaktiverad accenttext och teckenfärg #5C000000 #5DFFFFFF 00000011
AccentTextFillPrimary Primär accenttextfärg för förgrundstext och glyfer som kräver betoning #FF3F3682 #FFD2CCF8 00000002
AccentTextFillSecondary Accenttext som anger hovringstillstånd #FF221D46 #FFD2CCF8 00000002
AccentTextFillTertiary Dekortext som anger tryckläge #FF5649B0 #FFA79CF1 00000002

Kort

Token för kortliknande ytor – innehållsblock som finns på sid- eller lagerbakgrunder.

Token Description Light Mörk Högkontrast
CardBackgroundFillDefault Standardkortbakgrund #B2FFFFFF #0DFFFFFF 00000005
CardBackgroundFillSecondary Kortbakgrund som anger hovringstillstånd #80F6F6F6 #08FFFFFF 00000005
CardBackgroundFillTertiary Kortbakgrund som anger pressat tillstånd #FFFFFFFF #12FFFFFF 00000005
CardStrokeDefault Standardkortkantlinje #0F000000 #1A000000 00000010
CardStrokeDefaultSolid Heldragen kortkantlinje, som används när halvtransparent linjer orsakar synlighetsproblem #FFEBEBEB #FF1C1C1C 00000010
CardStrokeDefaultSolidAlt Alternativ kantlinje för fast kort #FFDADADA #FF0A0A0A 00000010

Control

Token för interaktiva standardkontroller som knappar, textrutor och kombinationsrutor.

Token Description Light Mörk Högkontrast
ControlAltFillDisabled Inaktiverad alternativ kontrollbakgrund #00FFFFFF #00FFFFFF 0000000F
ControlAltFillQuaternary Bakgrund för alternativ kontroll på fjärde nivån #18000000 #12FFFFFF 0000000E
ControlAltFillSecondary Alternativ kontrollbakgrund på andra nivån #06000000 #1A000000 0000000E
ControlAltFillTertiary Alternativ kontrollbakgrund på tredje nivån #0F000000 #0BFFFFFF 0000000E
ControlAltFillTransparent Transparent alternativ kontrollbakgrund #00FFFFFF #00FFFFFF 0000000E
ControlFillActiveInput Kontrollera bakgrund under aktiv textinmatning #FFFFFFFF #B21E1E1E 0000000F
ControlFillDefault Standardkontrollbakgrund (viloläge) #B2FFFFFF #0FFFFFFF 0000000F
ControlFillDisabled Inaktiverad kontrollbakgrund #4DF9F9F9 #0BFFFFFF 0000000F
ControlFillQuaternary Bakgrund för kontroll på fjärde nivån #C2F3F3F3 #0FFFFFFF 0000000E
ControlFillSecondary Kontrollbakgrund på andra nivån (hovring) #80F9F9F9 #15FFFFFF 0000000E
ControlFillTertiary Kontrollbakgrund på tredje nivån (trycks in) #4DF9F9F9 #08FFFFFF 0000000E
ControlFillTransparent Transparent kontrollbakgrund #00FFFFFF #00FFFFFF 0000000F
ControlOnImageFillDefault Standardkontrollbakgrund när den placeras på en bild #C9FFFFFF #B21C1C1C 0000000F
ControlOnImageFillDisabled Inaktiverad kontrollbakgrund när den placeras på en bild #00FFFFFF #001E1E1E 0000000F
ControlOnImageFillSecondary Hovringskontrollbakgrund när den placeras på en bild #FFF3F3F3 #FF1A1A1A 0000000E
ControlOnImageFillTertiary Tryckt kontrollbakgrund när den placeras på en bild #FFEBEBEB #FF131313 0000000E
ControlSolidFillDefault Gedigen kontrollbakgrund, används när transparens orsakar synlighetsproblem #FFFFFFFF #FF454545 0000000F
ControlStrokeDefault Standardkontrollkantlinje (viloläge) #0F000000 #12FFFFFF 00000010
ControlStrokeForStrongFillWhenOnImage Kontrollkantlinje för starka fyllningar placerade på bilder #59FFFFFF #6B000000 0000000A
ControlStrokeOnAccentDefault Standardkantlinje för kontroller i accentbakgrunder #14FFFFFF #14FFFFFF 0000000B
ControlStrokeOnAccentDisabled Inaktiverad kantlinje för kontroller i accentbakgrunder #0F000000 #33000000 0000000B
ControlStrokeOnAccentSecondary Hovringskantlinje för kontroller i accentbakgrunder #66000000 #24000000 0000000B
ControlStrokeOnAccentTertiary Tryck på kantlinje för kontroller på accentbakgrunder #37000000 #37000000 0000000B
ControlStrokeSecondary Kontrollkantlinje på andra nivån #0F000000 #12FFFFFF 00000008
ControlStrokeTransparent Transparent kontrollkantlinje #00FFFFFF #00FFFFFF 0000000F
ControlStrongFillDefault Stark kontrollfyllning för högkontrastelement som rullningslister #72000000 #8BFFFFFF 0000000A
ControlStrongFillDisabled Inaktiverad stark kontrollfyllning #51000000 #3FFFFFFF 0000000F
ControlStrongStrokeDefault Stark kontrollkantlinje för kryssrutor och alternativknappar #9C000000 #9AFFFFFF 00000008
ControlStrongStrokeDisabled Inaktiverad stark kontrollkantlinje #37000000 #28FFFFFF 0000000B

Avdelare

Token Description Light Mörk Högkontrast
DividerStrokeDefault Standardavgränsare och avgränsarstreck #14000000 #15FFFFFF 00000011

Fokus

Token Description Light Mörk Högkontrast
FocusStrokeInner Linje för inre fokusindikator #FFFFFFFF #B2000000 00000005
FocusStrokeOuter Linje för yttre fokusindikator #E4000000 #FFFFFFFF 00000008
Token Description Light Mörk Högkontrast
HyperlinkFillDisabled Inaktiverad hyperlänktextfärg #5C000000 #5DFFFFFF 00000013
HyperlinkFillPrimary Primär hyperlänktextfärg (vila) #FF003E92 #FF99EBFF 0000001A
HyperlinkFillSecondary Hyperlänktextfärg (hovring) #FF001A68 #FF60CDFF 0000001A
HyperlinkFillTertiary Hyperlänktextfärg (tryckt) #FF005FB8 #E560CDFF 0000001A

Lager och yta

Token för bakgrunder, skiktade ytor och containrar på sidnivå.

Token Description Light Mörk Högkontrast
LayerFillAlt Alternativ lagerfyllning för ytor #FFFFFFFF #0EFFFFFF 00000005
LayerFillDefault Standardskiktfyllning för ytor och rullningslister #80FFFFFF #4D3A3A3A 00000005
SolidBackgroundFillBase Grundläggande bakgrund för sidytor #FFF3F3F3 #FF202020 00000005
SolidBackgroundFillBaseAlt Alternativ bas solid bakgrund #FFDADADA #FF0A0A0A 00000005
SolidBackgroundFillSecondary Sekundär solid bakgrund (en nivå ovanför basen) #FFEEEEEE #FF1C1C1C 00000005
SolidBackgroundFillTertiary Tertiär solid bakgrund #FFF9F9F9 #FF282828 00000005
SolidBackgroundFillQuaternary Hel bakgrund på fjärde nivån #FFFFFFFF #FF2C2C2C 00000005
SolidBackgroundFillQuinary Bakgrund på femte nivån #FFFDFDFD #FF333333 00000005
SolidBackgroundFillSenary Gedigen bakgrund på sjätte nivån #FFFFFFFF #FF373737 00000005
SurfaceBackgroundFillDefault Standardbakgrund för diskreta ytor ovanför basen #FFF9F9F9 #FF2C2C2C 00000005
SurfaceStrokeDefault Standardyta kantlinje #66757575 #66757575 0000000A
SurfaceStrokeFlyout Utfälld kantlinje #0F000000 #33000000 0000000A

Skugga och rök

Token Description Light Mörk Högkontrast
ShadowFlyout Skuggfärg för utfällbara ytor som popup-fönster, knappbeskrivningar och snabbmenyer #24000000 #42000000 00000005
SmokeFillDefault Färg på rököverlägg för nedtoning av bakgrundsytor #4D000000 #4D000000 0000000F
SmokeFillInverse Omvänt rököverlägg färg #C9FFFFFF #B21C1C1C 0000000F

Subtila

Token för kontroller med minimal visuell vikt, till exempel verktygsfältsknappar och menyalternativ.

Token Description Light Mörk Högkontrast
SubtleFillDisabled Inaktiverad diskret kontrollfyllning #00000000 #00FFFFFF 00000005
SubtleFillSecondary Diskret kontrollfyllning (hovring) #0F000000 #0FFFFFFF 0000000F
SubtleFillTertiary Diskret kontrollfyllning (tryckt) #0A000000 #0BFFFFFF 0000000F
SubtleFillTransparent Transparent diskret kontrollfyllning #00FFFFFF #00FFFFFF 00000005

Systemstatus

Token för statusindikatorer – uppmärksamhet, försiktighet, kritisk, lyckad och neutral.

Token Description Light Mörk Högkontrast
SystemFillAttention Uppmärksamhetsindikator kantlinje och linje (information) #FF005FB7 #FF60CDFF 00000002
SystemFillAttentionBackground Bakgrund för uppmärksamhetsindikator #80F6F6F6 #08FFFFFF 00000018
SystemFillCaution Varningsindikator kantlinje och linje #FF9D5D00 #FFFCE100 00000002
SystemFillCautionBackground Varningsindikatorbakgrund #FFFFF4CE #FF433519 00000018
SystemFillCritical Felindikator kantlinje och linje #FFC42B1C #FFFF99A4 00000002
SystemFillCriticalBackground Bakgrund för felindikator #FFFDE7E9 #FF442726 00000018
SystemFillNeutral Neutral systemfyllning #72000000 #8BFFFFFF 00000002
SystemFillNeutralBackground Neutral systembakgrund #06000000 #08FFFFFF 00000018
SystemFillSolidAttentionBackground Bakgrund med gedigen uppmärksamhet, som används när transparens orsakar synlighetsproblem #FFF7F7F7 #FF2E2E2E 00000018
SystemFillSolidNeutral Solid neutral indikatorfyllning #FF8A8A8A #FF8A8A8A 00000002
SystemFillSolidNeutralBackground Solid neutral bakgrund #FFF3F3F3 #FF2E2E2E 00000018
SystemFillSuccess Framgångsindikator kantlinje och linje #FF0F7B0F #FF6CCB5F 00000002
SystemFillSuccessBackground Bakgrund för lyckad indikator #FFDFF6DD #FF393D1B 00000018

Text

Token Description Light Mörk Högkontrast
TextFillDisabled Inaktiverad textfärg #5C000000 #5DFFFFFF 00000011
TextFillPrimary Primär textfärg för allmänt innehåll #E4000000 #FFFFFFFF 00000008
TextFillSecondary Sekundär textfärg för kompletterande innehåll och tips #9E000000 #C8FFFFFF 00000008
TextFillTertiary Tertiär textfärg (lågkontrast – använd inte för primärt innehåll i vila) #72000000 #8BFFFFFF 00000008
TextOnAccentFillDisabled Inaktiverad text på accentbakgrunder #B2FFFFFF #80000000 00000003
TextOnAccentFillPrimary Primär text på accentbakgrunder #FFFFFFFF #FF000000 0000000E
TextOnAccentFillSecondary Sekundär text på accentbakgrunder #B2FFFFFF #80000000 0000000E
TextOnAccentFillSelectedText Textfärg för markerad text på accentbakgrunder #FFFFFFFF #FFFFFFFF 0000000E

Interna shell-färger

Dessa token styr IDE-kromytor – huvudfönsterramen, verktygsfönsterrubriker, flikar, statusfält och andra gränssnittsnivåelement. De är de primära token som temaförfattare använder för att ändra den övergripande känslan i IDE.

Visual Studio lägger till Fluent-färgtoken när skalområden blir mer detaljerade. Ytterligare token kan visas för kromytor, till exempel flikrubriker och fönsterrubriker så att temaförfattare kan formatera dessa områden oberoende av annan skalkrom.

Environment

Token som styr huvudfönstrets och gränssnittets kromytor.

Token Description Light Mörk Högkontrast
EnvironmentBackground Huvudfönsterbakgrund och flytande verktygsfönster #FFEEEEEE #FF1C1C1C 00000005
EnvironmentBadge Bakgrund för Solution Info Badge (till exempel Live Share-indikator) #B2FFFFFF #0FFFFFFF 0000000F
EnvironmentBody Bakgrund för brödtext/innehållsområde i huvudgränssnittsfönstret #FFEEEEEE #FF1C1C1C 00000005
EnvironmentBodyText Textfärg i området brödtext/innehåll i huvudgränssnittsfönstret #E4000000 #FFFFFFFF 00000008
EnvironmentBorder Aktiv huvudfönsterkantlinje #FF5649B0 #FF9184EE 0000000A
EnvironmentBorderInactive Inaktiv huvudfönsterkantlinje och interna avdelare #FFADADAD #FF454545 00000003
EnvironmentHeader Aktivt fönster eller sidhuvudbakgrund för verktygsfönster, separat från flikbakgrunder #FFF9F9F9 #FF282828 00000005
EnvironmentHeaderInactive Inaktivt fönster eller sidhuvudbakgrund för verktygsfönster, separat från flikbakgrunder #FFF9F9F9 #FF282828 00000005
EnvironmentIndicator Kantlinje eller indikator för automatiskt dolda flikar #66757575 #66757575 0000000A
EnvironmentLayeredBackground Bakgrund för lagerelement som InfoBars och flikgrupper #80FFFFFF #4D3A3A3A 00000005
EnvironmentLayeredBorder Kantlinje för lagerelement som InfoBars och märken #0F000000 #80000000 00000010
EnvironmentLogo Visual Studio logga fyll i systemmenyn #FF5649B0 #FF9184EE 0000000D
EnvironmentTab Bakgrund för aktivt flikhuvud, separat från fönster- och verktygsfönsterrubriker #FFF9F9F9 #FF282828 00000005
EnvironmentTabInactive Inaktiv flikrubrikbakgrund, separat från fönster- och verktygsfönsterrubriker #FFF9F9F9 #FF282828 00000005

Beskrivning

Token för fönstrets stängningsknapp specifikt.

Token Description Light Mörk Högkontrast
CaptionControlCloseFillPrimary Stäng knappbakgrund (hovring) #FFC42B1C #FFC42B1C 0000000D
CaptionControlCloseFillSecondary Stäng knappbakgrund (tryckt) #E6C42B1C #E6C42B1C 0000000D
CaptionControlCloseTextFillPrimary Stäng knappikonens färg (hovra) #FFFFFFFF #FFFFFFFF 00000009
CaptionControlCloseTextFillSecondary Stäng knappikonens färg (trycks in) #B3FFFFFF #B3FFFFFF 00000009

Statusfält

Token för statusfältet i olika lägen.

Token Description Light Mörk Högkontrast
StatusBarBackgroundFillBuilding Bakgrund i statusfältet när du skapar #FF5649B0 #FF3F3682 00000005
StatusBarBackgroundFillDebugging Bakgrund i statusfältet vid felsökning #FFBC4B09 #FF7A2101 00000005
StatusBarBackgroundFillRest Statusfältets bakgrund i standardtillstånd #8B000000 #4D000000 00000005
StatusBarBackgroundFillSolutionLoading Bakgrund i statusfältet vid inläsning av en lösning #FF005BA1 #FF003B6A 00000005
StatusBarControlFillSecondary Sekundär kontrollfyllning i statusfältet #33000000 #20FFFFFF 0000000E
StatusBarTextFillBuilding Text i statusfältet när du skapar #FFFFFFFF #FFFFFFFF 00000008
StatusBarTextFillDebugging Text i statusfältet vid felsökning #FFFFFFFF #FFFFFFFF 00000008
StatusBarTextFillDisabled Text för inaktiverat statusfält #90FFFFFF #5DFFFFFF 00000011
StatusBarTextFillRest Statusfälttext i standardtillstånd #FFFFFFFF #FFFFFFFF 00000008
StatusBarTextFillSolutionLoading Text i statusfältet vid inläsning av en lösning #FFFFFFFF #FFFFFFFF 00000008

Färgreferens för högkontrastsystem

Högkontrastvärden är systemfärgindex. Visual Studio mappar dessa till användarens aktiva högkontrastfärgschema. Vanliga index:

Index Systemfärg
00000001 ActiveCaption
00000002 ActiveCaptionText
00000003 ActiveBorder
00000005 Window
00000008 WindowText
00000009 HotTrackColor
0000000A InactiveBorder
0000000B InactiveCaption
0000000D Highlight
0000000E HighlightText
0000000F ButtonFace
00000010 ButtonShadow
00000011 GrayText
00000013 InactiveCaptionText
00000018 GradientActiveCaption
0000001A HotLight