Visual Studio Designfarbtoken

Visual Studio verwendet semantische Farbtoken, um die Darstellung jeder Ui-Oberfläche zu definieren. Diese Token sind Teil des Fluent-Designsystems, das in Visual Studio 2026 eingeführt wurde. Anstatt auf bestimmte Hexadexfarben zu verweisen, verweist jedes Steuerelement und jede Oberfläche auf ein benanntes Token. Designs stellen Werte für diese Token bereit, und die gesamte IDE wird entsprechend aktualisiert.

In dieser Referenz werden alle verfügbaren Designfarbtoken, die beabsichtigte Verwendung und die Standardwerte in den Designs "Hell", "Dunkel" und "Hoher Kontrast" aufgeführt. Verwenden Sie diese Referenz, wenn Sie benutzerdefinierte Designs erstellen oder einzelne Token in Ihren Einstellungen oder über den Designfarben-Editor außer Kraft setzen.

Anpassen von Designfarben in Visual Studio

Visual Studio 2026 (18.7) enthält eine Produktdesignfarbenseite zum Anpassen von Fluent-Designfarbtoken. Verwenden Sie den Befehl " Designfarben bearbeiten ", oder öffnen Sie " Tools > Options > Environment > Visual Experience > "-Designfarben. Auf der Seite werden die Token für das aktive Design in einem durchsuchbaren Raster aufgelistet.

Wählen Sie ein Token aus, und wählen Sie eine Farbe aus, um die Änderung sofort anzuwenden. Sie können ein einzelnes Token zurücksetzen, ohne Ihre anderen Anpassungen zu entfernen. Außerkraftsetzungen werden für jedes Design separat gespeichert und über dem ausgewählten Design angeordnet, sodass das Wechseln von Designs auch zu den für dieses Design gespeicherten Außerkraftsetzungen wechselt. Abhängig von den verfügbaren Token können Sie Editorfarben, Toolfenster, Shellchrom, Registerkartenüberschriften, Fensterüberschriften und Interaktionszustände wie Hoverfarben anpassen.

Weitere Einstellungen für die Endbenutzerdarstellung finden Sie unter Ändern von Schriftarten, Farben und Designs in Visual Studio.

Außerkraftsetzungen des Freigabedesigns

Um Tokenüberschreibungen freizugeben, platzieren Sie eine JSON-Datei in %LOCALAPPDATA%\Microsoft\VisualStudio\18.0_xxxxxxxx\ColorThemes. Der Dateiname muss mit dem Design übereinstimmen, um es außer Kraft zu setzen. Überschreibt z. B dark.json . das Design "Dunkel". Starten Sie Visual Studio neu, um dateibasierte Außerkraftsetzungen auf das entsprechende Design anzuwenden.

Funktionsweise von Designtoken

Jedes Token ist ein semantischer Name, der einem Farbwert zugeordnet ist. Token sind in zwei Kategorien unterteilt:

  • Shell (ShellColors) – Token für allgemeine Steuerelemente und Oberflächen, die vom Windows 11 Fluent-Designsystem abgeleitet sind. Diese Coverschaltflächen, Textfelder, Hintergründe, Rahmen, Statusindikatoren und vieles mehr. Verwenden Sie diese Token für allgemeine Ui-Formatierungen.
  • Interne Shell (ShellInternalColors) – Token für IDE-Chromoberflächen wie das Hauptfenster, die Titelleiste, die Statusleiste und die Kopfzeilen des Toolfensters. Diese werden für Designüberschreibungen verfügbar gemacht, sind jedoch nicht für die Formatierung von Erweiterungssteuerelementen vorgesehen.

Farbwertformat

Farben werden im #AARRGGBB Format angegeben (Alpha, Rot, Grün, Blau). Ist beispielsweise #B2FFFFFF weiß bei ~70% Deckkraft.

Werte für hohen Kontrast sind Systemfarbindizes (z. B 00000008 = WindowText. ). Visual Studio löst diese zur Laufzeit in das aktuelle Farbschema für hohen Kontrast des Benutzers auf.

Außerkraftsetzungsverhalten

Designbezogene Tokenwerte sind die Basiswerte für das ausgewählte Design. Wenn ein Benutzer ein Token im Designfarben-Editor ändert, wendet Visual Studio diesen Wert als Überschreibungsebene über dem ausgewählten Design an. Durch das Entfernen oder Zurücksetzen einer einzelnen Außerkraftsetzung wird das Token ohne Auswirkungen auf andere Außerkraftsetzungen auf den Basiswert des ausgewählten Designs wiederhergestellt.

Shellfarben

Diese Token formatieren allgemeine Steuerelemente und Oberflächen über Visual Studio hinweg. Sie folgen den gleichen Benennungskonventionen wie Windows 11 Fluent-Designressourcen.

Akzent

Token für Akzentfarbenelemente wie primäre Schaltflächen, ausgewählte Kontrollkästchen und aktive Indikatoren.

Token Beschreibung Light Dunkel Hoher Kontrast
AccentFillAlt Alternativer Akzenthintergrund, der verwendet wird, wenn ein anderer Farbton als "Standard" erforderlich ist #FF3F3682 #FFD2CCF8 0000000D
AccentFillDefault Standardakzenthintergrund für interaktive Elemente, Aktionsaufrufe und ausgewählte Zustände #FF5649B0 #FF9184EE 0000000D
AccentFillDisabled Deaktivierter Akzenthintergrund #37000000 #28FFFFFF 00000010
AccentFillSecondary Akzenthintergrund, der den Hoverzustand angibt #E55649B0 #E59184EE 0000000D
AccentFillSelectedTextBackground Hintergrund für markierten Text in aktiven Textfeldern #FF0078D4 #FF005FB7 0000000D
AccentFillSelectedTextBackgroundSubtle Subtiler ausgewählter Texthintergrund, der verwendet wird, wenn die Vordergrundtextfarbe nicht invertiert werden kann #4D0078D4 #6660CDFF 0000000D
AccentFillSenary Subtiler Akzenthintergrund für Zustände außerhalb des Tertiären #1F5649B0 #1F9184EE 0000000E
AccentFillTertiary Akzenthintergrund, der den gedrückten Zustand angibt #CC5649B0 #CC9184EE 0000000D
AccentTextFillDisabled Deaktivierter Akzenttext und Glyphenfarbe #5C000000 #5DFFFFFF 00000011
AccentTextFillPrimary Primäre Akzenttextfarbe für Vordergrundtext und Glyphen, die Hervorhebung erfordern #FF3F3682 #FFD2CCF8 00000002
AccentTextFillSecondary Akzenttext, der den Hoverzustand angibt #FF221D46 #FFD2CCF8 00000002
AccentTextFillTertiary Akzenttext, der den gedrückten Zustand angibt #FF5649B0 #FFA79CF1 00000002

Karte

Token für kartenähnliche Oberflächen – Inhaltsblöcke, die sich auf Seiten- oder Ebenenhintergründen befinden.

Token Beschreibung Light Dunkel Hoher Kontrast
CardBackgroundFillDefault Standardkartenhintergrund #B2FFFFFF #0DFFFFFF 00000005
CardBackgroundFillSecondary Kartenhintergrund, der den Hoverzustand angibt #80F6F6F6 #08FFFFFF 00000005
CardBackgroundFillTertiary Kartenhintergrund, der den gedrückten Zustand angibt #FFFFFFFF #12FFFFFF 00000005
CardStrokeDefault Standardkartenrahmen #0F000000 #1A000000 00000010
CardStrokeDefaultSolid Einfarbiger Kartenrahmen, der verwendet wird, wenn halbtransparente Striche zu Sichtbarkeitsproblemen führen #FFEBEBEB #FF1C1C1C 00000010
CardStrokeDefaultSolidAlt Alternativer Einfarbiger Kartenrahmen #FFDADADA #FF0A0A0A 00000010

Steuerung

Token für standardmäßige interaktive Steuerelemente wie Schaltflächen, Textfelder und Kombinationsfelder.

Token Beschreibung Light Dunkel Hoher Kontrast
ControlAltFillDisabled Deaktivierter Hintergrund für alternative Steuerelemente #00FFFFFF #00FFFFFF 0000000F
ControlAltFillQuaternary Hintergrund alternativer Steuerelemente auf vierter Ebene #18000000 #12FFFFFF 0000000E
ControlAltFillSecondary Hintergrund alternativer Steuerelemente auf zweiter Ebene #06000000 #1A000000 0000000E
ControlAltFillTertiary Hintergrund alternativer Steuerelemente auf dritter Ebene #0F000000 #0BFFFFFF 0000000E
ControlAltFillTransparent Transparenter Alternativer Steuerelementhintergrund #00FFFFFF #00FFFFFF 0000000E
ControlFillActiveInput Steuern des Hintergrunds während der aktiven Texteingabe #FFFFFFFF #B21E1E1E 0000000F
ControlFillDefault Standardsteuerelementhintergrund (Reststatus) #B2FFFFFF #0FFFFFFF 0000000F
ControlFillDisabled Deaktivierter Steuerelementhintergrund #4DF9F9F9 #0BFFFFFF 0000000F
ControlFillQuaternary Hintergrund des Steuerelements auf vierter Ebene #C2F3F3F3 #0FFFFFFF 0000000E
ControlFillSecondary Hintergrund des Steuerelements auf zweiter Ebene (Daraufzeigen) #80F9F9F9 #15FFFFFF 0000000E
ControlFillTertiary Hintergrund des Steuerelements der dritten Ebene (gedrückt) #4DF9F9F9 #08FFFFFF 0000000E
ControlFillTransparent Transparenter Steuerelementhintergrund #00FFFFFF #00FFFFFF 0000000F
ControlOnImageFillDefault Standardsteuerelementhintergrund, wenn es auf einem Bild platziert wird #C9FFFFFF #B21C1C1C 0000000F
ControlOnImageFillDisabled Deaktivierter Steuerelementhintergrund beim Platzieren in einem Bild #00FFFFFF #001E1E1E 0000000F
ControlOnImageFillSecondary Daraufzeigen des Steuerelementhintergrunds, wenn es auf einem Bild platziert wird #FFF3F3F3 #FF1A1A1A 0000000E
ControlOnImageFillTertiary Gedrückter Steuerelementhintergrund, wenn es auf einem Bild platziert wird #FFEBEBEB #FF131313 0000000E
ControlSolidFillDefault Einfarbiger Steuerelementhintergrund, der verwendet wird, wenn Transparenz Sichtbarkeitsprobleme verursacht #FFFFFFFF #FF454545 0000000F
ControlStrokeDefault Standard-Steuerelementrahmen (Restzustand) #0F000000 #12FFFFFF 00000010
ControlStrokeForStrongFillWhenOnImage Kontrollrahmen für starke Füllungen, die auf Bildern platziert werden #59FFFFFF #6B000000 0000000A
ControlStrokeOnAccentDefault Standardrahmen für Steuerelemente auf Akzenthintergründen #14FFFFFF #14FFFFFF 0000000B
ControlStrokeOnAccentDisabled Deaktivierter Rahmen für Steuerelemente auf Akzenthintergründen #0F000000 #33000000 0000000B
ControlStrokeOnAccentSecondary Zeigen des Rahmens für Steuerelemente auf Akzenthintergründe #66000000 #24000000 0000000B
ControlStrokeOnAccentTertiary Gedrückter Rahmen für Steuerelemente auf Akzenthintergründen #37000000 #37000000 0000000B
ControlStrokeSecondary Rahmenlinie der zweiten Ebene #0F000000 #12FFFFFF 00000008
ControlStrokeTransparent Transparenter Kontrollrahmen #00FFFFFF #00FFFFFF 0000000F
ControlStrongFillDefault Starke Steuerelementfüllung für Elemente mit hohem Kontrast wie Bildlaufleisten #72000000 #8BFFFFFF 0000000A
ControlStrongFillDisabled Deaktivierte starke Steuerelementfüllung #51000000 #3FFFFFFF 0000000F
ControlStrongStrokeDefault Starker Kontrollrahmen für Kontrollkästchen und Optionsfelder #9C000000 #9AFFFFFF 00000008
ControlStrongStrokeDisabled Deaktivierter starker Kontrollrahmen #37000000 #28FFFFFF 0000000B

Teiler

Token Beschreibung Light Dunkel Hoher Kontrast
DividerStrokeDefault Standardtrennzeichen und Trennstrich #14000000 #15FFFFFF 00000011

Fokus

Token Beschreibung Light Dunkel Hoher Kontrast
FocusStrokeInner Innerer Fokusindikatorstrich #FFFFFFFF #B2000000 00000005
FocusStrokeOuter Äußerer Fokusindikatorstrich #E4000000 #FFFFFFFF 00000008
Token Beschreibung Light Dunkel Hoher Kontrast
HyperlinkFillDisabled Deaktivierte Linktextfarbe #5C000000 #5DFFFFFF 00000013
HyperlinkFillPrimary Primäre Hyperlinktextfarbe (Rest) #FF003E92 #FF99EBFF 0000001A
HyperlinkFillSecondary Hyperlinktextfarbe (Daraufzeigen) #FF001A68 #FF60CDFF 0000001A
HyperlinkFillTertiary Linktextfarbe (gedrückt) #FF005FB8 #E560CDFF 0000001A

Schicht und Oberfläche

Token für Hintergründe, layerierte Oberflächen und Container auf Seitenebene.

Token Beschreibung Light Dunkel Hoher Kontrast
LayerFillAlt Alternative Schichtfüllung für Oberflächen #FFFFFFFF #0EFFFFFF 00000005
LayerFillDefault Standardebenenfüllung für Oberflächen und Bildlaufleisten #80FFFFFF #4D3A3A3A 00000005
SolidBackgroundFillBase Einfarbiger Basishintergrund für Seitenoberflächen #FFF3F3F3 #FF202020 00000005
SolidBackgroundFillBaseAlt Alternativer basisfarbiger Hintergrund #FFDADADA #FF0A0A0A 00000005
SolidBackgroundFillSecondary Sekundärer einfarbiger Hintergrund (eine Ebene oberhalb der Basis) #FFEEEEEE #FF1C1C1C 00000005
SolidBackgroundFillTertiary Tertiärer einfarbiger Hintergrund #FFF9F9F9 #FF282828 00000005
SolidBackgroundFillQuaternary Einfarbiger Hintergrund auf vierter Ebene #FFFFFFFF #FF2C2C2C 00000005
SolidBackgroundFillQuinary Volltonhintergrund der fünften Ebene #FFFDFDFD #FF333333 00000005
SolidBackgroundFillSenary Einfarbiger Hintergrund auf sechster Ebene #FFFFFFFF #FF373737 00000005
SurfaceBackgroundFillDefault Standardhintergrund für diskrete Oberflächen oberhalb der Basis #FFF9F9F9 #FF2C2C2C 00000005
SurfaceStrokeDefault Standardmäßiger Oberflächenrahmen #66757575 #66757575 0000000A
SurfaceStrokeFlyout Flyout-Oberflächenrahmen #0F000000 #33000000 0000000A

Schatten und Rauch

Token Beschreibung Light Dunkel Hoher Kontrast
ShadowFlyout Schattenfarbe für Flyoutoberflächen wie Popups, QuickInfos und Kontextmenüs #24000000 #42000000 00000005
SmokeFillDefault Rauchüberlagerungsfarbe für dimmende Hintergrundoberflächen #4D000000 #4D000000 0000000F
SmokeFillInverse Umgekehrte Rauchüberlagerungsfarbe #C9FFFFFF #B21C1C1C 0000000F

Subtil

Token für Steuerelemente mit minimaler visueller Gewichtung, z. B. Symbolleistenschaltflächen und Menüelemente.

Token Beschreibung Light Dunkel Hoher Kontrast
SubtleFillDisabled Dezente Steuerelementfüllung deaktiviert #00000000 #00FFFFFF 00000005
SubtleFillSecondary Subtile Steuerelementfüllung (Daraufzeigen) #0F000000 #0FFFFFFF 0000000F
SubtleFillTertiary Subtile Steuerelementfüllung (gedrückt) #0A000000 #0BFFFFFF 0000000F
SubtleFillTransparent Transparente dezente Steuerelementfüllung #00FFFFFF #00FFFFFF 00000005

Systemzustand

Token für Statusindikatoren – Aufmerksamkeit, Vorsicht, kritisch, Erfolg und neutral.

Token Beschreibung Light Dunkel Hoher Kontrast
SystemFillAttention Strich und Rahmen des Aufmerksamkeitsindikators (Informational) #FF005FB7 #FF60CDFF 00000002
SystemFillAttentionBackground Hintergrund der Aufmerksamkeitsanzeige #80F6F6F6 #08FFFFFF 00000018
SystemFillCaution Warnindikatorrahmen und Strich #FF9D5D00 #FFFCE100 00000002
SystemFillCautionBackground Hintergrund der Warnungsanzeige #FFFFF4CE #FF433519 00000018
SystemFillCritical Fehlerindikatorrahmen und Strich #FFC42B1C #FFFF99A4 00000002
SystemFillCriticalBackground Hintergrund der Fehleranzeige #FFFDE7E9 #FF442726 00000018
SystemFillNeutral Neutrale Systemfüllung #72000000 #8BFFFFFF 00000002
SystemFillNeutralBackground Neutraler Systemhintergrund #06000000 #08FFFFFF 00000018
SystemFillSolidAttentionBackground Ein solider Aufmerksamkeitshintergrund, der verwendet wird, wenn Transparenz Sichtbarkeitsprobleme verursacht #FFF7F7F7 #FF2E2E2E 00000018
SystemFillSolidNeutral Einfarbige neutrale Indikatorfüllung #FF8A8A8A #FF8A8A8A 00000002
SystemFillSolidNeutralBackground Einfarbiger neutraler Hintergrund #FFF3F3F3 #FF2E2E2E 00000018
SystemFillSuccess Erfolgsindikator rahmen und Strich #FF0F7B0F #FF6CCB5F 00000002
SystemFillSuccessBackground Hintergrund der Erfolgsanzeige #FFDFF6DD #FF393D1B 00000018

Text

Token Beschreibung Light Dunkel Hoher Kontrast
TextFillDisabled Deaktivierte Textfarbe #5C000000 #5DFFFFFF 00000011
TextFillPrimary Primäre Textfarbe für allgemeine Inhalte #E4000000 #FFFFFFFF 00000008
TextFillSecondary Sekundäre Textfarbe für ergänzende Inhalte und Hinweise #9E000000 #C8FFFFFF 00000008
TextFillTertiary Tertiäre Textfarbe (niedriger Kontrast – nicht für ruhende Primärinhalte verwenden) #72000000 #8BFFFFFF 00000008
TextOnAccentFillDisabled Deaktivierter Text auf Akzenthintergründen #B2FFFFFF #80000000 00000003
TextOnAccentFillPrimary Primärer Text auf Akzenthintergründen #FFFFFFFF #FF000000 0000000E
TextOnAccentFillSecondary Sekundärer Text auf Akzenthintergründen #B2FFFFFF #80000000 0000000E
TextOnAccentFillSelectedText Textfarbe für markierten Text auf Akzenthintergründen #FFFFFFFF #FFFFFFFF 0000000E

Interne Shellfarben

Diese Token steuern IDE-Chromoberflächen – hauptfensterrahmen, Toolfensterüberschriften, Registerkarten, Statusleiste und andere Elemente auf Shellebene. Sie sind die primären Tokendesignautoren, die zum Ändern des Gesamtgefühls der IDE verwendet werden.

Visual Studio fügt Fluent-Farbtoken hinzu, da Shellbereiche präziser werden. Zusätzliche Token können für Chromoberflächen wie Registerkartenüberschriften und Fensterüberschriften angezeigt werden, sodass Designautoren diese Bereiche unabhängig von anderen Shellchromen formatieren können.

Umwelt

Token, die die Hauptfenster- und Shellchromoberflächen steuern.

Token Beschreibung Light Dunkel Hoher Kontrast
EnvironmentBackground Hauptfensterhintergrund und unverankerte Toolfenster #FFEEEEEE #FF1C1C1C 00000005
EnvironmentBadge Hintergrund des Lösungsinformationssignals (z. B. LiveFreigabe-Indikator) #B2FFFFFF #0FFFFFFF 0000000F
EnvironmentBody Hintergrund des Text-/Inhaltsbereichs des Hauptshellfensters #FFEEEEEE #FF1C1C1C 00000005
EnvironmentBodyText Textfarbe im Text-/Inhaltsbereich des Hauptshellfensters #E4000000 #FFFFFFFF 00000008
EnvironmentBorder Aktiver Hauptfensterrahmen #FF5649B0 #FF9184EE 0000000A
EnvironmentBorderInactive Inaktiver Hauptfensterrahmen und interne Trennlinien #FFADADAD #FF454545 00000003
EnvironmentHeader Hintergrund der aktiven Fenster- oder Toolfensterkopfzeile, getrennt von Registerkartenhintergründe #FFF9F9F9 #FF282828 00000005
EnvironmentHeaderInactive Inaktiver Fenster- oder Toolfenster-Kopfzeilenhintergrund, getrennt von Registerkartenhintergründe #FFF9F9F9 #FF282828 00000005
EnvironmentIndicator Rahmen oder Indikator für automatisch ausgeblendete Registerkarten #66757575 #66757575 0000000A
EnvironmentLayeredBackground Hintergrund für mehrschichtige Elemente wie Infoleisten und Registerkartengruppen #80FFFFFF #4D3A3A3A 00000005
EnvironmentLayeredBorder Rahmen für überschichtete Elemente wie Infoleisten und Signale #0F000000 #80000000 00000010
EnvironmentLogo Visual Studio Logofüllung im Systemmenü #FF5649B0 #FF9184EE 0000000D
EnvironmentTab Hintergrund der aktiven Registerkartenüberschrift, getrennt von Fenster- und Toolfensterüberschriften #FFF9F9F9 #FF282828 00000005
EnvironmentTabInactive Inaktiver Registerkartenkopfhintergrund, getrennt von Fenster- und Toolfensterkopfzeilen #FFF9F9F9 #FF282828 00000005

Beschriftung

Token für die Schaltfläche zum Schließen des Fensters speziell.

Token Beschreibung Light Dunkel Hoher Kontrast
CaptionControlCloseFillPrimary Schaltflächenhintergrund schließen (Daraufzeigen) #FFC42B1C #FFC42B1C 0000000D
CaptionControlCloseFillSecondary Schaltflächenhintergrund schließen (gedrückt) #E6C42B1C #E6C42B1C 0000000D
CaptionControlCloseTextFillPrimary Symbolfarbe "Schaltfläche schließen" (Daraufzeigen) #FFFFFFFF #FFFFFFFF 00000009
CaptionControlCloseTextFillSecondary Symbolfarbe "Schaltfläche schließen" (gedrückt) #B3FFFFFF #B3FFFFFF 00000009

Statusleiste

Token für die Statusleiste über die verschiedenen Modi hinweg.

Token Beschreibung Light Dunkel Hoher Kontrast
StatusBarBackgroundFillBuilding Statusleistenhintergrund beim Erstellen #FF5649B0 #FF3F3682 00000005
StatusBarBackgroundFillDebugging Statusleistenhintergrund beim Debuggen #FFBC4B09 #FF7A2101 00000005
StatusBarBackgroundFillRest Statusleistenhintergrund im Standardzustand #8B000000 #4D000000 00000005
StatusBarBackgroundFillSolutionLoading Statusleistenhintergrund beim Laden einer Lösung #FF005BA1 #FF003B6A 00000005
StatusBarControlFillSecondary Sekundäre Steuerelementfüllung auf der Statusleiste #33000000 #20FFFFFF 0000000E
StatusBarTextFillBuilding Statusleistentext beim Erstellen #FFFFFFFF #FFFFFFFF 00000008
StatusBarTextFillDebugging Statusleistentext beim Debuggen #FFFFFFFF #FFFFFFFF 00000008
StatusBarTextFillDisabled Deaktivierter Statusleistentext #90FFFFFF #5DFFFFFF 00000011
StatusBarTextFillRest Statusleistentext im Standardzustand #FFFFFFFF #FFFFFFFF 00000008
StatusBarTextFillSolutionLoading Statusleistentext beim Laden einer Lösung #FFFFFFFF #FFFFFFFF 00000008

Farbreferenz für das System mit hohem Kontrast

Hohe Kontrastwerte sind Systemfarbindizes. Visual Studio ordnet diese dem aktiven Farbschema für hohen Kontrast des Benutzers zu. Allgemeine Indizes:

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