Visual Studio themakleurtokens

Visual Studio gebruikt semantische kleurtokens om het uiterlijk van elk UI-oppervlak te definiëren. Deze tokens maken deel uit van het Fluent-ontwerpsysteem dat is geïntroduceerd in Visual Studio 2026. In plaats van te verwijzen naar specifieke hexkleuren, verwijst elk besturingselement en oppervlak naar een benoemd token. Thema's bieden waarden voor deze tokens en de volledige IDE wordt dienovereenkomstig bijgewerkt.

Deze verwijzing bevat elk beschikbaar themakleurtoken, het beoogde gebruik en de standaardwaarden in de thema's Licht, Donker en Hoog contrast. Gebruik deze verwijzing bij het maken van aangepaste thema's of het overschrijven van afzonderlijke tokens in uw instellingen of via de editor themakleuren .

Themakleuren aanpassen in Visual Studio

Visual Studio 2026 (18.7) bevat een pagina met kleuren van het productthema voor het aanpassen van fluent-themakleurentokens. Gebruik de opdracht Themakleuren bewerken of open De > kleuren van het thema Extra-opties > voor visuele ervaring in > de omgeving>. De pagina bevat de tokens voor het actieve thema in een doorzoekbaar raster.

Selecteer een token en kies een kleur om de wijziging onmiddellijk toe te passen. U kunt een afzonderlijk token opnieuw instellen zonder dat u andere aanpassingen hoeft te verwijderen. Onderdrukkingen worden afzonderlijk opgeslagen voor elk thema en gelaagd boven op het geselecteerde thema, dus schakelen tussen thema's wordt ook overgeschakeld naar de onderdrukkingen die voor dat thema zijn opgeslagen. Afhankelijk van de beschikbare tokens kunt u editorkleuren, toolvensters, shell chrome, tabheaders, vensterkoppen en interactiestatussen aanpassen, zoals aanwijskleuren.

Zie Lettertypen, kleuren en thema's wijzigen in Visual Studio voor bredere weergave-instellingen voor eindgebruikers.

Onderdrukkingen van thema delen

Als u tokenoverschrijvingen wilt delen, plaatst u een JSON-bestand in %LOCALAPPDATA%\Microsoft\VisualStudio\18.0_xxxxxxxx\ColorThemes. De bestandsnaam moet overeenkomen met het thema dat moet worden overschreven. Hiermee wordt bijvoorbeeld dark.json het thema Donker overschreven. Start Visual Studio opnieuw om onderdrukkingen op basis van bestanden toe te passen op het overeenkomende thema.

Hoe thematokens werken

Elk token is een semantische naam die wordt toegewezen aan een kleurwaarde. Tokens zijn ingedeeld in twee categorieën:

  • Shell (ShellColors) - tokens voor algemene besturingselementen en oppervlakken, afgeleid van het Windows 11 Fluent-ontwerpsysteem. Deze omslagknoppen, tekstvakken, achtergronden, randen, statusindicatoren en meer. Gebruik deze tokens voor algemene stijl van de gebruikersinterface.
  • Shell intern (ShellInternalColors) - tokens voor IDE chrome oppervlakken zoals het hoofdvenster, de titelbalk, de statusbalk en de kopteksten van het hulpmiddelvenster. Deze worden weergegeven voor thema-onderdrukkingen, maar zijn niet bedoeld voor de stijl van extensiebeheer.

Kleurwaardenotatie

Kleuren worden opgegeven in #AARRGGBB notatie (alfa, rood, groen, blauw). Is bijvoorbeeld #B2FFFFFF wit bij ongeveer 70% dekking.

Waarden voor hoog contrast zijn systeemkleurindexen (bijvoorbeeld 00000008 = WindowText). Visual Studio wordt deze tijdens runtime omgezet in het huidige kleurenschema hoog contrast van de gebruiker.

Gedrag overschrijven

Door thema geleverde tokenwaarden zijn de basiswaarden voor het geselecteerde thema. Wanneer een gebruiker een token wijzigt in de editor themakleuren, Visual Studio die waarde toepassen als een onderdrukkingslaag boven op het geselecteerde thema. Als u een afzonderlijke onderdrukking verwijdert of opnieuw instelt, wordt het token hersteld naar de basiswaarde van het geselecteerde thema zonder dat dit van invloed is op andere onderdrukkingen.

Shellkleuren

Deze tokens maken algemene besturingselementen en oppervlakken in Visual Studio. Ze volgen dezelfde naamconventies als Windows 11 Fluent-themabronnen.

Accent

Tokens voor accentgekleurde elementen, zoals primaire knoppen, geselecteerde selectievakjes en actieve indicatoren.

Token Description Licht Donker Hoog contrast
AccentFillAlt Alternatieve accentachtergrond, gebruikt wanneer een andere tint dan Standaard nodig is #FF3F3682 #FFD2CCF8 0000000D
AccentFillDefault Standaardaccentachtergrond voor interactieve elementen, aanroepen naar actie en geselecteerde statussen #FF5649B0 #FF9184EE 0000000D
AccentFillDisabled Achtergrond met accent uitgeschakeld #37000000 #28FFFFFF 00000010
AccentFillSecondary Accentachtergrond die de muisaanwijzerstatus aangeeft #E55649B0 #E59184EE 0000000D
AccentFillSelectedTextBackground Achtergrond voor geselecteerde tekst in actieve tekstvelden #FF0078D4 #FF005FB7 0000000D
AccentFillSelectedTextBackgroundSubtle Subtiele geselecteerde tekstachtergrond, gebruikt wanneer tekstkleur voor de voorgrond niet kan worden omgekeerd #4D0078D4 #6660CDFF 0000000D
AccentFillSenary Subtiele accentachtergrond voor staten buiten Tertiaire #1F5649B0 #1F9184EE 0000000E
AccentFillTertiary Accentachtergrond die de drukstatus aangeeft #CC5649B0 #CC9184EE 0000000D
AccentTextFillDisabled Accenttekst en glyphkleur uitgeschakeld #5C000000 #5DFFFFFF 00000011
AccentTextFillPrimary Primaire accenttekstkleur voor voorgrondtekst en glyphs waarvoor nadruk is vereist #FF3F3682 #FFD2CCF8 00000002
AccentTextFillSecondary Accenttekst die de muisaanwijzerstatus aangeeft #FF221D46 #FFD2CCF8 00000002
AccentTextFillTertiary Accenttekst die de status Ingedrukt aangeeft #FF5649B0 #FFA79CF1 00000002

Kaart

Tokens voor kaartachtige oppervlakken: inhoudsblokken die op pagina- of laagachtergronden zitten.

Token Description Licht Donker Hoog contrast
CardBackgroundFillDefault Standaardkaartachtergrond #B2FFFFFF #0DFFFFFF 00000005
CardBackgroundFillSecondary Kaartachtergrond die aanwijsstatus aangeeft #80F6F6F6 #08FFFFFF 00000005
CardBackgroundFillTertiary Kaartachtergrond die de status ingedrukt aangeeft #FFFFFFFF #12FFFFFF 00000005
CardStrokeDefault Standaardkaartrand #0F000000 #1A000000 00000010
CardStrokeDefaultSolid Ononderbroken kaartrand, gebruikt wanneer semitransparante stroken zichtbaarheidsproblemen veroorzaken #FFEBEBEB #FF1C1C1C 00000010
CardStrokeDefaultSolidAlt Alternatieve ononderbroken kaartrand #FFDADADA #FF0A0A0A 00000010

Beheersing

Tokens voor standaard interactieve besturingselementen, zoals knoppen, tekstvakken en keuzelijsten met invoervak.

Token Description Licht Donker Hoog contrast
ControlAltFillDisabled Alternatieve besturingsachtergrond uitgeschakeld #00FFFFFF #00FFFFFF 0000000F
ControlAltFillQuaternary Achtergrond alternatieve besturingselementen op vierde niveau #18000000 #12FFFFFF 0000000E
ControlAltFillSecondary Achtergrond alternatieve besturingselementen op het tweede niveau #06000000 #1A000000 0000000E
ControlAltFillTertiary Achtergrond alternatieve besturingselementen op het derde niveau #0F000000 #0BFFFFFF 0000000E
ControlAltFillTransparent Transparante alternatieve besturingsachtergrond #00FFFFFF #00FFFFFF 0000000E
ControlFillActiveInput Achtergrond beheren tijdens actieve tekstinvoer #FFFFFFFF #B21E1E1E 0000000F
ControlFillDefault Standaardachtergrond van besturingselement (reststatus) #B2FFFFFF #0FFFFFFF 0000000F
ControlFillDisabled Achtergrond van besturingselement uitgeschakeld #4DF9F9F9 #0BFFFFFF 0000000F
ControlFillQuaternary Achtergrond van besturingselement op vierde niveau #C2F3F3F3 #0FFFFFFF 0000000E
ControlFillSecondary Achtergrond van besturingselement op het tweede niveau (aanwijzen) #80F9F9F9 #15FFFFFF 0000000E
ControlFillTertiary Achtergrond van besturingselement op het derde niveau (ingedrukt) #4DF9F9F9 #08FFFFFF 0000000E
ControlFillTransparent Transparante besturingsachtergrond #00FFFFFF #00FFFFFF 0000000F
ControlOnImageFillDefault Standaardbesturingsachtergrond wanneer deze op een afbeelding wordt geplaatst #C9FFFFFF #B21C1C1C 0000000F
ControlOnImageFillDisabled Achtergrond van besturingselement uitgeschakeld wanneer deze op een afbeelding wordt geplaatst #00FFFFFF #001E1E1E 0000000F
ControlOnImageFillSecondary Besturingselementachtergrond aanwijzen wanneer deze op een afbeelding wordt geplaatst #FFF3F3F3 #FF1A1A1A 0000000E
ControlOnImageFillTertiary Besturingselementachtergrond ingedrukt wanneer deze op een afbeelding wordt geplaatst #FFEBEBEB #FF131313 0000000E
ControlSolidFillDefault Achtergrond van effen besturingselementen, gebruikt wanneer transparantie zichtbaarheidsproblemen veroorzaakt #FFFFFFFF #FF454545 0000000F
ControlStrokeDefault Standaardrand voor besturingselementen (reststatus) #0F000000 #12FFFFFF 00000010
ControlStrokeForStrongFillWhenOnImage Besturingselementrand voor sterke opvullingen die op afbeeldingen worden geplaatst #59FFFFFF #6B000000 0000000A
ControlStrokeOnAccentDefault Standaardrand voor besturingselementen op accentachtergronden #14FFFFFF #14FFFFFF 0000000B
ControlStrokeOnAccentDisabled Uitgeschakelde rand voor besturingselementen op accentachtergronden #0F000000 #33000000 0000000B
ControlStrokeOnAccentSecondary Rand aanwijzen voor besturingselementen op accentachtergronden #66000000 #24000000 0000000B
ControlStrokeOnAccentTertiary Rand ingedrukt voor besturingselementen op accentachtergronden #37000000 #37000000 0000000B
ControlStrokeSecondary Rand voor besturingselementen op het tweede niveau #0F000000 #12FFFFFF 00000008
ControlStrokeTransparent Transparante besturingsrand #00FFFFFF #00FFFFFF 0000000F
ControlStrongFillDefault Sterke besturingsvulling voor elementen met hoog contrast, zoals schuifbalken #72000000 #8BFFFFFF 0000000A
ControlStrongFillDisabled Sterke opvulling van besturingselementen uitgeschakeld #51000000 #3FFFFFFF 0000000F
ControlStrongStrokeDefault Sterke besturingsrand voor selectievakjes en keuzerondjes #9C000000 #9AFFFFFF 00000008
ControlStrongStrokeDisabled Uitgeschakelde rand voor sterke controle #37000000 #28FFFFFF 0000000B

Scheidingslijn

Token Description Licht Donker Hoog contrast
DividerStrokeDefault Standaardscheidingsteken en scheidingsteken #14000000 #15FFFFFF 00000011

Focus

Token Description Licht Donker Hoog contrast
FocusStrokeInner Binnenste focusindicatorstreek #FFFFFFFF #B2000000 00000005
FocusStrokeOuter Buitenste focusindicatorstreek #E4000000 #FFFFFFFF 00000008
Token Description Licht Donker Hoog contrast
HyperlinkFillDisabled Tekstkleur van hyperlink uitgeschakeld #5C000000 #5DFFFFFF 00000013
HyperlinkFillPrimary Tekstkleur van primaire hyperlink (rest) #FF003E92 #FF99EBFF 0000001A
HyperlinkFillSecondary Tekstkleur van hyperlink (aanwijzen) #FF001A68 #FF60CDFF 0000001A
HyperlinkFillTertiary Tekstkleur van hyperlink (ingedrukt) #FF005FB8 #E560CDFF 0000001A

Laag en oppervlak

Tokens voor achtergronden, gelaagde oppervlakken en containers op paginaniveau.

Token Description Licht Donker Hoog contrast
LayerFillAlt Alternatieve laagvulling voor oppervlakken #FFFFFFFF #0EFFFFFF 00000005
LayerFillDefault Standaardlaagvulling voor oppervlakken en schuifbalken #80FFFFFF #4D3A3A3A 00000005
SolidBackgroundFillBase Effen basisachtergrond voor paginaoppervlakken #FFF3F3F3 #FF202020 00000005
SolidBackgroundFillBaseAlt Alternatieve, ononderbroken basisachtergrond #FFDADADA #FF0A0A0A 00000005
SolidBackgroundFillSecondary Secundaire effen achtergrond (één niveau boven basis) #FFEEEEEE #FF1C1C1C 00000005
SolidBackgroundFillTertiary Tertiaire ononderbroken achtergrond #FFF9F9F9 #FF282828 00000005
SolidBackgroundFillQuaternary Effen achtergrond op vierde niveau #FFFFFFFF #FF2C2C2C 00000005
SolidBackgroundFillQuinary Effen achtergrond op het vijfde niveau #FFFDFDFD #FF333333 00000005
SolidBackgroundFillSenary Effen achtergrond op zesde niveau #FFFFFFFF #FF373737 00000005
SurfaceBackgroundFillDefault Standaardachtergrond voor discrete oppervlakken boven de basis #FFF9F9F9 #FF2C2C2C 00000005
SurfaceStrokeDefault Standaardoppervlakrand #66757575 #66757575 0000000A
SurfaceStrokeFlyout Rand van flyoutoppervlak #0F000000 #33000000 0000000A

Schaduw en rook

Token Description Licht Donker Hoog contrast
ShadowFlyout Schaduwkleur voor flyoutoppervlakken zoals pop-ups, knopinfo en contextmenu's #24000000 #42000000 00000005
SmokeFillDefault Rookoverlaykleur voor dimmende achtergrondoppervlakken #4D000000 #4D000000 0000000F
SmokeFillInverse Inverse rookoverlaykleur #C9FFFFFF #B21C1C1C 0000000F

Subtiele

Tokens voor besturingselementen met minimale visuele gewicht, zoals werkbalkknoppen en menu-items.

Token Description Licht Donker Hoog contrast
SubtleFillDisabled Subtiele opvulling van besturingselementen uitgeschakeld #00000000 #00FFFFFF 00000005
SubtleFillSecondary Subtiele opvulling van besturingselementen (aanwijzen) #0F000000 #0FFFFFFF 0000000F
SubtleFillTertiary Subtiele opvulling van besturingselementen (ingedrukt) #0A000000 #0BFFFFFF 0000000F
SubtleFillTransparent Transparante subtiele opvulling van besturingselementen #00FFFFFF #00FFFFFF 00000005

Systeemstatus

Tokens voor statusindicatoren: aandacht, voorzichtigheid, kritiek, succes en neutraal.

Token Description Licht Donker Hoog contrast
SystemFillAttention Aandachtsindicatorrand en -lijn (informatielijk) #FF005FB7 #FF60CDFF 00000002
SystemFillAttentionBackground Achtergrond van aandachtsindicator #80F6F6F6 #08FFFFFF 00000018
SystemFillCaution Waarschuwingsindicatorrand en -lijn #FF9D5D00 #FFFCE100 00000002
SystemFillCautionBackground Achtergrond waarschuwingsindicator #FFFFF4CE #FF433519 00000018
SystemFillCritical Foutindicatorrand en pennenstreek #FFC42B1C #FFFF99A4 00000002
SystemFillCriticalBackground Achtergrond van foutindicator #FFFDE7E9 #FF442726 00000018
SystemFillNeutral Neutrale systeemvulling #72000000 #8BFFFFFF 00000002
SystemFillNeutralBackground Neutrale systeemachtergrond #06000000 #08FFFFFF 00000018
SystemFillSolidAttentionBackground Achtergrond van solide aandacht, gebruikt wanneer transparantie zichtbaarheidsproblemen veroorzaakt #FFF7F7F7 #FF2E2E2E 00000018
SystemFillSolidNeutral Effen neutrale indicatorvulling #FF8A8A8A #FF8A8A8A 00000002
SystemFillSolidNeutralBackground Effen neutrale achtergrond #FFF3F3F3 #FF2E2E2E 00000018
SystemFillSuccess Geslaagde indicatorrand en pennenstreek #FF0F7B0F #FF6CCB5F 00000002
SystemFillSuccessBackground Achtergrond van geslaagde indicator #FFDFF6DD #FF393D1B 00000018

Text

Token Description Licht Donker Hoog contrast
TextFillDisabled Uitgeschakelde tekstkleur #5C000000 #5DFFFFFF 00000011
TextFillPrimary Primaire tekstkleur voor algemene inhoud #E4000000 #FFFFFFFF 00000008
TextFillSecondary Secundaire tekstkleur voor aanvullende inhoud en hints #9E000000 #C8FFFFFF 00000008
TextFillTertiary Tertiaire tekstkleur (laag contrast, niet gebruiken voor primaire inhoud in rust) #72000000 #8BFFFFFF 00000008
TextOnAccentFillDisabled Uitgeschakelde tekst op accentachtergronden #B2FFFFFF #80000000 00000003
TextOnAccentFillPrimary Primaire tekst op accentachtergronden #FFFFFFFF #FF000000 0000000E
TextOnAccentFillSecondary Secundaire tekst op accentachtergronden #B2FFFFFF #80000000 0000000E
TextOnAccentFillSelectedText Tekstkleur voor geselecteerde tekst op accentachtergronden #FFFFFFFF #FFFFFFFF 0000000E

Interne shellkleuren

Deze tokens bepalen de chromen oppervlakken van IDE: het hoofdvensterframe, kopteksten, tabbladen, statusbalk en andere elementen op shellniveau. Dit zijn de belangrijkste tokens die auteurs van thema's gebruiken om het algehele gevoel van de IDE te wijzigen.

Visual Studio voegt Fluent-kleurtokens toe naarmate shellgebieden gedetailleerder worden. Er kunnen extra tokens worden weergegeven voor chromen oppervlakken, zoals tabkoppen en vensterkoppen, zodat themaauteurs deze gebieden onafhankelijk van andere shell chromen kunnen stylen.

Environment

Tokens die het hoofdvenster en de schalen chromen oppervlakken beheren.

Token Description Licht Donker Hoog contrast
EnvironmentBackground Hoofdvensterachtergrond en zwevende gereedschapsvensters #FFEEEEEE #FF1C1C1C 00000005
EnvironmentBadge Achtergrond van oplossingsinfo (bijvoorbeeld Live Share-indicator) #B2FFFFFF #0FFFFFFF 0000000F
EnvironmentBody Hoofdtekst/inhoudsgebiedachtergrond van het hoofdshellvenster #FFEEEEEE #FF1C1C1C 00000005
EnvironmentBodyText Tekstkleur in het hoofdtekst-/inhoudsgebied van het hoofdshellvenster #E4000000 #FFFFFFFF 00000008
EnvironmentBorder Actieve rand van hoofdvenster #FF5649B0 #FF9184EE 0000000A
EnvironmentBorderInactive Inactieve hoofdvensterrand en interne scheidingslijnen #FFADADAD #FF454545 00000003
EnvironmentHeader Achtergrond van actieve venster- of vensterkoptekst, gescheiden van tabachtergronden #FFF9F9F9 #FF282828 00000005
EnvironmentHeaderInactive Achtergrond van inactieve venster- of vensterkoptekst, gescheiden van tabachtergronden #FFF9F9F9 #FF282828 00000005
EnvironmentIndicator Rand of indicator voor automatisch verborgen tabbladen #66757575 #66757575 0000000A
EnvironmentLayeredBackground Achtergrond voor gelaagde elementen, zoals InfoBalken en tabgroepen #80FFFFFF #4D3A3A3A 00000005
EnvironmentLayeredBorder Rand voor gelaagde elementen, zoals InfoBars en badges #0F000000 #80000000 00000010
EnvironmentLogo Visual Studio logo invullen in het systeemmenu #FF5649B0 #FF9184EE 0000000D
EnvironmentTab Achtergrond van actieve tabkoptekst, gescheiden van venster- en vensterkoppen #FFF9F9F9 #FF282828 00000005
EnvironmentTabInactive Achtergrond van inactieve tabheader, gescheiden van venster- en hulpmiddelvensterkoppen #FFF9F9F9 #FF282828 00000005

bijschrift

Tokens voor de knop Venster sluiten specifiek.

Token Description Licht Donker Hoog contrast
CaptionControlCloseFillPrimary Knopachtergrond sluiten (aanwijzen) #FFC42B1C #FFC42B1C 0000000D
CaptionControlCloseFillSecondary Knopachtergrond sluiten (ingedrukt) #E6C42B1C #E6C42B1C 0000000D
CaptionControlCloseTextFillPrimary Knoppictogramkleur sluiten (aanwijzen) #FFFFFFFF #FFFFFFFF 00000009
CaptionControlCloseTextFillSecondary Knoppictogramkleur sluiten (ingedrukt) #B3FFFFFF #B3FFFFFF 00000009

Statusbalk

Tokens voor de statusbalk in de verschillende modi.

Token Description Licht Donker Hoog contrast
StatusBarBackgroundFillBuilding Achtergrond van statusbalk bij het bouwen #FF5649B0 #FF3F3682 00000005
StatusBarBackgroundFillDebugging Achtergrond van statusbalk bij foutopsporing #FFBC4B09 #FF7A2101 00000005
StatusBarBackgroundFillRest Achtergrond van statusbalk met standaardstatus #8B000000 #4D000000 00000005
StatusBarBackgroundFillSolutionLoading Achtergrond van statusbalk bij het laden van een oplossing #FF005BA1 #FF003B6A 00000005
StatusBarControlFillSecondary Secundair besturingselement vullen op de statusbalk #33000000 #20FFFFFF 0000000E
StatusBarTextFillBuilding Tekst op de statusbalk bij het bouwen #FFFFFFFF #FFFFFFFF 00000008
StatusBarTextFillDebugging Statusbalktekst bij foutopsporing #FFFFFFFF #FFFFFFFF 00000008
StatusBarTextFillDisabled Uitgeschakelde tekst op de statusbalk #90FFFFFF #5DFFFFFF 00000011
StatusBarTextFillRest Statusbalktekst met de standaardstatus #FFFFFFFF #FFFFFFFF 00000008
StatusBarTextFillSolutionLoading Tekst van de statusbalk bij het laden van een oplossing #FFFFFFFF #FFFFFFFF 00000008

Naslaginformatie over systeemkleur hoog contrast

Waarden voor hoog contrast zijn systeemkleurindexen. Visual Studio wijst deze toe aan het actieve kleurenschema Hoog contrast van de gebruiker. Algemene indexen:

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