tokeny kolorów motywu Visual Studio

Visual Studio używa tokenów kolorów semantycznych do definiowania wyglądu każdej powierzchni interfejsu użytkownika. Tokeny te są częścią systemu projektowania Fluent wprowadzonego w Visual Studio 2026 r. Zamiast odwoływać się do określonych kolorów szesnastkowe, każda kontrolka i powierzchnia odwołuje się do nazwanego tokenu. Motywy zapewniają wartości dla tych tokenów, a wszystkie aktualizacje środowiska IDE odpowiednio.

Ta dokumentacja zawiera listę wszystkich dostępnych tokenów kolorów motywu, zamierzonego użycia i wartości domyślnych w motywach Jasny, Ciemny i Duży kontrast. Użyj tej dokumentacji podczas tworzenia motywów niestandardowych lub zastępowania poszczególnych tokenów w ustawieniach lub za pośrednictwem edytora kolorów motywu .

Dostosowywanie kolorów motywu w Visual Studio

Visual Studio 2026 (18.7) zawiera stronę kolorów motywu produktu do dostosowywania tokenów kolorów motywu Fluent. Użyj polecenia Edytuj kolory motywu lub otwórz opcje Narzędzia > Opcje >> Kolory wizualnego środowiska>. Strona zawiera listę tokenów aktywnego motywu w siatce z możliwością wyszukiwania.

Wybierz token i wybierz kolor, aby natychmiast zastosować zmianę. Możesz zresetować pojedynczy token bez usuwania innych dostosowań. Przesłonięcia są zapisywane oddzielnie dla każdego motywu i nakładane na wierzchu wybranego motywu, dlatego przełączanie motywów powoduje przełączenie również do przesłonięć zapisanych dla tego motywu. W zależności od dostępnych tokenów można dostosować kolory edytora, okna narzędzi, chrome powłoki, nagłówki kart, nagłówki okien i stany interakcji, takie jak kolory aktywowania.

Aby uzyskać szersze ustawienia wyglądu użytkownika końcowego, zobacz Zmienianie czcionek, kolorów i motywów w Visual Studio.

Udostępnianie przesłonięć motywu

Aby udostępnić przesłonięcia tokenów, umieść plik JSON w pliku %LOCALAPPDATA%\Microsoft\VisualStudio\18.0_xxxxxxxx\ColorThemes. Nazwa pliku musi być zgodna z motywem, aby zastąpić. Na przykład dark.json zastępuje motyw Ciemny. Uruchom ponownie Visual Studio, aby zastosować przesłonięcia oparte na plikach do pasującego motywu.

Jak działają tokeny motywu

Każdy token jest semantyczną nazwą, która mapuje na wartość koloru. Tokeny są zorganizowane w dwie kategorie:

  • Shell (ShellColors) — tokeny dla typowych kontrolek i powierzchni, pochodzące z systemu projektowania Windows 11 Fluent. Te przyciski okładki, pola tekstowe, tła, obramowania, wskaźniki stanu i nie tylko. Użyj tych tokenów do ogólnego stylu interfejsu użytkownika.
  • Wewnętrzna powłoka (ShellInternalColors) — tokeny dla powierzchni chrome ide, takich jak okno główne, pasek tytułu, pasek stanu i nagłówki okien narzędzi. Są one widoczne dla przesłonięć motywów, ale nie są przeznaczone do stylów kontrolek rozszerzeń.

Format wartości koloru

Kolory są określane w #AARRGGBB formacie (alfa, czerwony, zielony, niebieski). Na przykład #B2FFFFFF jest biały przy ok. 70% nieprzezroczystości.

Wartości o wysokim kontraście to indeksy kolorów systemowych (na przykład 00000008 = WindowText). Visual Studio rozwiązuje je z bieżącym schematem kolorów wysokiego kontrastu użytkownika w czasie wykonywania.

Zastępowanie zachowania

Wartości tokenu dostarczone przez motyw są wartościami podstawowymi dla wybranego motywu. Gdy użytkownik zmieni token w edytorze kolorów motywu, Visual Studio stosuje ją jako warstwę zastępowania na podstawie wybranego motywu. Usunięcie lub zresetowanie pojedynczego zastąpienia przywraca token do wartości podstawowej wybranego motywu bez wpływu na inne przesłonięcia.

Kolory powłoki

Te tokeny stylu wspólnych kontrolek i powierzchni w Visual Studio. Są one zgodne z tymi samymi konwencjami nazewnictwa co zasoby motywu Windows 11 Fluent.

Akcent

Tokeny dla elementów z kolorami wyróżniającymi, takich jak przyciski podstawowe, zaznaczone pola wyboru i aktywne wskaźniki.

Token Description Jasny Ciemny duży kontrast
AccentFillAlt Alternatywne tło akcentu używane, gdy wymagany jest inny kolor niż domyślny #FF3F3682 #FFD2CCF8 0000000D
AccentFillDefault Domyślne tło wyróżniające dla elementów interakcyjnych, wywołań do akcji i wybranych stanów #FF5649B0 #FF9184EE 0000000D
AccentFillDisabled Wyłączone tło wyróżniające #37000000 #28FFFFFF 00000010
AccentFillSecondary Tło wyróżniające wskazujące stan aktywowania #E55649B0 #E59184EE 0000000D
AccentFillSelectedTextBackground Tło zaznaczonego tekstu w aktywnych polach tekstowych #FF0078D4 #FF005FB7 0000000D
AccentFillSelectedTextBackgroundSubtle Subtelne tło zaznaczonego tekstu, używane, gdy nie można odwrócić koloru tekstu pierwszego planu #4D0078D4 #6660CDFF 0000000D
AccentFillSenary Subtelne tło akcentu dla stanów poza tertiary #1F5649B0 #1F9184EE 0000000E
AccentFillTertiary Tło wyróżniające wskazujące stan naciśnięty #CC5649B0 #CC9184EE 0000000D
AccentTextFillDisabled Wyłączony tekst wyróżniający i kolor glif #5C000000 #5DFFFFFF 00000011
AccentTextFillPrimary Podstawowy kolor tekstu wyróżniającego dla tekstu pierwszego planu i glyphs wymagających wyróżnienia #FF3F3682 #FFD2CCF8 00000002
AccentTextFillSecondary Tekst wyróżniający wskazujący stan aktywowania #FF221D46 #FFD2CCF8 00000002
AccentTextFillTertiary Tekst wyróżniający wskazujący stan naciśnięty #FF5649B0 #FFA79CF1 00000002

Card

Tokeny dla powierzchni przypominających karty — bloki zawartości, które znajdują się na tle strony lub warstwy.

Token Description Jasny Ciemny duży kontrast
CardBackgroundFillDefault Tło karty domyślnej #B2FFFFFF #0DFFFFFF 00000005
CardBackgroundFillSecondary Tło karty wskazujące stan aktywowania #80F6F6F6 #08FFFFFF 00000005
CardBackgroundFillTertiary Tło karty wskazujące stan naciśnięty #FFFFFFFF #12FFFFFF 00000005
CardStrokeDefault Domyślne obramowanie karty #0F000000 #1A000000 00000010
CardStrokeDefaultSolid Obramowanie karty stałej używane w przypadku półprzezroczystych pociągnięć powoduje problemy z widocznością #FFEBEBEB #FF1C1C1C 00000010
CardStrokeDefaultSolidAlt Alternatywne obramowanie karty stałej #FFDADADA #FF0A0A0A 00000010

Kontrola

Tokeny dla standardowych kontrolek interaktywnych, takich jak przyciski, pola tekstowe i pola kombi.

Token Description Jasny Ciemny duży kontrast
ControlAltFillDisabled Wyłączone tło kontrolki alternatywnej #00FFFFFF #00FFFFFF 0000000F
ControlAltFillQuaternary Tło alternatywnej kontrolki czwartego poziomu #18000000 #12FFFFFF 0000000E
ControlAltFillSecondary Tło alternatywnej kontrolki drugiego poziomu #06000000 #1A000000 0000000E
ControlAltFillTertiary Tło alternatywnej kontrolki trzeciego poziomu #0F000000 #0BFFFFFF 0000000E
ControlAltFillTransparent Przezroczyste tło alternatywnej kontrolki #00FFFFFF #00FFFFFF 0000000E
ControlFillActiveInput Kontrolowanie tła podczas aktywnego wprowadzania tekstu #FFFFFFFF #B21E1E1E 0000000F
ControlFillDefault Domyślne tło kontrolki (stan spoczynku) #B2FFFFFF #0FFFFFFF 0000000F
ControlFillDisabled Wyłączone tło kontrolki #4DF9F9F9 #0BFFFFFF 0000000F
ControlFillQuaternary Tło kontroli na czwartym poziomie #C2F3F3F3 #0FFFFFFF 0000000E
ControlFillSecondary Tło kontrolki drugiego poziomu (zatrzymanie wskaźnika myszy) #80F9F9F9 #15FFFFFF 0000000E
ControlFillTertiary Tło kontrolki trzeciego poziomu (naciśnięty) #4DF9F9F9 #08FFFFFF 0000000E
ControlFillTransparent Przezroczyste tło kontrolki #00FFFFFF #00FFFFFF 0000000F
ControlOnImageFillDefault Domyślne tło kontrolki umieszczone na obrazie #C9FFFFFF #B21C1C1C 0000000F
ControlOnImageFillDisabled Wyłączone tło kontrolki po umieszczeniu na obrazie #00FFFFFF #001E1E1E 0000000F
ControlOnImageFillSecondary Zatrzymaj tło kontrolki po umieszczeniu na obrazie #FFF3F3F3 #FF1A1A1A 0000000E
ControlOnImageFillTertiary Tło kontrolki naciśnięty podczas umieszczania na obrazie #FFEBEBEB #FF131313 0000000E
ControlSolidFillDefault Tło stałej kontrolki, używane, gdy przezroczystość powoduje problemy z widocznością #FFFFFFFF #FF454545 0000000F
ControlStrokeDefault Domyślne obramowanie kontrolki (stan spoczynku) #0F000000 #12FFFFFF 00000010
ControlStrokeForStrongFillWhenOnImage Obramowanie sterujące dla silnych wypełnień umieszczonych na obrazach #59FFFFFF #6B000000 0000000A
ControlStrokeOnAccentDefault Domyślne obramowanie kontrolek w tłach wyróżniających #14FFFFFF #14FFFFFF 0000000B
ControlStrokeOnAccentDisabled Wyłączone obramowanie dla kontrolek w tłach wyróżniających #0F000000 #33000000 0000000B
ControlStrokeOnAccentSecondary Zatrzymaj obramowanie dla kontrolek na tłach wyróżniających #66000000 #24000000 0000000B
ControlStrokeOnAccentTertiary Naciśnięty obramowanie dla kontrolek na tłach wyróżniających #37000000 #37000000 0000000B
ControlStrokeSecondary Obramowanie kontroli drugiego poziomu #0F000000 #12FFFFFF 00000008
ControlStrokeTransparent Przezroczyste obramowanie kontrolki #00FFFFFF #00FFFFFF 0000000F
ControlStrongFillDefault Silne wypełnienie kontrolki dla elementów o wysokim kontraście, takich jak paski przewijania #72000000 #8BFFFFFF 0000000A
ControlStrongFillDisabled Wyłączone wypełnienie silnej kontrolki #51000000 #3FFFFFFF 0000000F
ControlStrongStrokeDefault Silne obramowanie sterujące dla pól wyboru i przycisków radiowych #9C000000 #9AFFFFFF 00000008
ControlStrongStrokeDisabled Wyłączono obramowanie silnej kontroli #37000000 #28FFFFFF 0000000B

Dzielnik

Token Description Jasny Ciemny duży kontrast
DividerStrokeDefault Domyślny podział i pociągnięcie separatora #14000000 #15FFFFFF 00000011

Fokus

Token Description Jasny Ciemny duży kontrast
FocusStrokeInner Wewnętrzny pociągnięcie wskaźnika koncentracji uwagi #FFFFFFFF #B2000000 00000005
FocusStrokeOuter Zewnętrzny pociągnięcie wskaźnika koncentracji uwagi #E4000000 #FFFFFFFF 00000008
Token Description Jasny Ciemny duży kontrast
HyperlinkFillDisabled Wyłączony kolor tekstu hiperłącza #5C000000 #5DFFFFFF 00000013
HyperlinkFillPrimary Podstawowy kolor tekstu hiperłącza (reszta) #FF003E92 #FF99EBFF 0000001A
HyperlinkFillSecondary Kolor tekstu hiperłącza (wskaźnik myszy) #FF001A68 #FF60CDFF 0000001A
HyperlinkFillTertiary Kolor tekstu hiperłącza (naciśnięty) #FF005FB8 #E560CDFF 0000001A

Warstwa i powierzchnia

Tokeny dla tła, warstwowych powierzchni i kontenerów na poziomie strony.

Token Description Jasny Ciemny duży kontrast
LayerFillAlt Wypełnienie warstwy alternatywnej dla powierzchni #FFFFFFFF #0EFFFFFF 00000005
LayerFillDefault Domyślne wypełnienie warstwy dla powierzchni i pasków przewijania #80FFFFFF #4D3A3A3A 00000005
SolidBackgroundFillBase Podstawowe stałe tło dla powierzchni strony #FFF3F3F3 #FF202020 00000005
SolidBackgroundFillBaseAlt Alternatywne solidne tło bazowe #FFDADADA #FF0A0A0A 00000005
SolidBackgroundFillSecondary Pomocnicze tło stałe (jeden poziom powyżej podstawy) #FFEEEEEE #FF1C1C1C 00000005
SolidBackgroundFillTertiary Tło stałe tertiary #FFF9F9F9 #FF282828 00000005
SolidBackgroundFillQuaternary Tło stałe na poziomie czwartym #FFFFFFFF #FF2C2C2C 00000005
SolidBackgroundFillQuinary Tło stałe piątego poziomu #FFFDFDFD #FF333333 00000005
SolidBackgroundFillSenary Stałe tło szóstego poziomu #FFFFFFFF #FF373737 00000005
SurfaceBackgroundFillDefault Domyślne tło dla dyskretnych powierzchni powyżej podstawy #FFF9F9F9 #FF2C2C2C 00000005
SurfaceStrokeDefault Domyślne obramowanie powierzchni #66757575 #66757575 0000000A
SurfaceStrokeFlyout Obramowanie powierzchni wysuwane #0F000000 #33000000 0000000A

Cień i dym

Token Description Jasny Ciemny duży kontrast
ShadowFlyout Kolor cienia dla powierzchni wysuwanych, takich jak wyskakujące okienka, etykietki narzędzi i menu kontekstowe #24000000 #42000000 00000005
SmokeFillDefault Kolor nakładki dymu do ściemniania powierzchni tła #4D000000 #4D000000 0000000F
SmokeFillInverse Odwrotny kolor nakładki dymu #C9FFFFFF #B21C1C1C 0000000F

Subtelne

Tokeny dla kontrolek z minimalną wagą wizualną, takie jak przyciski paska narzędzi i elementy menu.

Token Description Jasny Ciemny duży kontrast
SubtleFillDisabled Wyłączone wypełnienie subtelnej kontrolki #00000000 #00FFFFFF 00000005
SubtleFillSecondary Wypełnienie subtelne kontrolki (zatrzymanie wskaźnika myszy) #0F000000 #0FFFFFFF 0000000F
SubtleFillTertiary Wypełnienie subtelne kontrolki (naciśnięty) #0A000000 #0BFFFFFF 0000000F
SubtleFillTransparent Przezroczyste wypełnienie subtelne kontrolki #00FFFFFF #00FFFFFF 00000005

Stan systemu

Tokeny dla wskaźników stanu — uwaga, ostrożność, krytyczne, sukces i neutralne.

Token Description Jasny Ciemny duży kontrast
SystemFillAttention Obramowanie i pociągnięcie wskaźnika uwagi (informacyjne) #FF005FB7 #FF60CDFF 00000002
SystemFillAttentionBackground Tło wskaźnika uwagi #80F6F6F6 #08FFFFFF 00000018
SystemFillCaution Obramowanie i pociągnięcie wskaźnika ostrzeżenia #FF9D5D00 #FFFCE100 00000002
SystemFillCautionBackground Tło wskaźnika ostrzeżenia #FFFFF4CE #FF433519 00000018
SystemFillCritical Obramowanie i pociągnięcie wskaźnika błędu #FFC42B1C #FFFF99A4 00000002
SystemFillCriticalBackground Tło wskaźnika błędu #FFFDE7E9 #FF442726 00000018
SystemFillNeutral Wypełnienie systemu neutralnego #72000000 #8BFFFFFF 00000002
SystemFillNeutralBackground Tło systemu neutralnego #06000000 #08FFFFFF 00000018
SystemFillSolidAttentionBackground Solidne tło uwagi, używane, gdy przezroczystość powoduje problemy z widocznością #FFF7F7F7 #FF2E2E2E 00000018
SystemFillSolidNeutral Wypełnienie wskaźnika o stałym neutralności #FF8A8A8A #FF8A8A8A 00000002
SystemFillSolidNeutralBackground Tło neutralne na stałe #FFF3F3F3 #FF2E2E2E 00000018
SystemFillSuccess Obramowanie i pociągnięcie wskaźnika powodzenia #FF0F7B0F #FF6CCB5F 00000002
SystemFillSuccessBackground Tło wskaźnika sukcesu #FFDFF6DD #FF393D1B 00000018

Tekst

Token Description Jasny Ciemny duży kontrast
TextFillDisabled Wyłączony kolor tekstu #5C000000 #5DFFFFFF 00000011
TextFillPrimary Podstawowy kolor tekstu dla zawartości ogólnej #E4000000 #FFFFFFFF 00000008
TextFillSecondary Pomocniczy kolor tekstu dla dodatkowej zawartości i wskazówek #9E000000 #C8FFFFFF 00000008
TextFillTertiary Kolor tekstu tertiary (niski kontrast — nie należy używać do przechowywania zawartości podstawowej) #72000000 #8BFFFFFF 00000008
TextOnAccentFillDisabled Wyłączony tekst na tłach wyróżniających #B2FFFFFF #80000000 00000003
TextOnAccentFillPrimary Tekst podstawowy na tłach wyróżniających #FFFFFFFF #FF000000 0000000E
TextOnAccentFillSecondary Tekst pomocniczy na tłach wyróżniających #B2FFFFFF #80000000 0000000E
TextOnAccentFillSelectedText Kolor tekstu dla zaznaczonego tekstu na tłach wyróżniających #FFFFFFFF #FFFFFFFF 0000000E

Kolory wewnętrzne powłoki

Te tokeny kontrolują powierzchnie chrome środowiska IDE — ramki głównej okna, nagłówków okien narzędzi, kart, paska stanu i innych elementów na poziomie powłoki. Są one głównymi autorami motywów tokenów używanymi do zmiany ogólnego działania środowiska IDE.

Visual Studio dodaje tokeny kolorów Fluent, ponieważ obszary powłoki stają się bardziej szczegółowe. Dodatkowe tokeny mogą być wyświetlane dla powierzchni chromowanych, takich jak nagłówki tabulacji i nagłówki okien, dzięki czemu autorzy motywów mogą stylować te obszary niezależnie od innych elementów chrome powłoki.

Environment

Tokeny kontrolujące główne powierzchnie okien i powłoki.

Token Description Jasny Ciemny duży kontrast
EnvironmentBackground Główne okna tła i przestawne okna narzędzi #FFEEEEEE #FF1C1C1C 00000005
EnvironmentBadge Tło wskaźnika informacji o rozwiązaniu (na przykład wskaźnik live share) #B2FFFFFF #0FFFFFFF 0000000F
EnvironmentBody Treść/obszar zawartości tło okna głównej powłoki #FFEEEEEE #FF1C1C1C 00000005
EnvironmentBodyText Kolor tekstu w obszarze treści/zawartości okna głównej powłoki #E4000000 #FFFFFFFF 00000008
EnvironmentBorder Aktywne obramowanie okna głównego #FF5649B0 #FF9184EE 0000000A
EnvironmentBorderInactive Nieaktywne obramowanie okna głównego i wewnętrzne podziały #FFADADAD #FF454545 00000003
EnvironmentHeader Tło nagłówka okna aktywnego lub okna narzędzi, oddzielone od tła karty #FFF9F9F9 #FF282828 00000005
EnvironmentHeaderInactive Nieaktywne tło nagłówka okna lub okna narzędzi, oddzielone od tła karty #FFF9F9F9 #FF282828 00000005
EnvironmentIndicator Obramowanie lub wskaźnik automatycznie ukrytych kart #66757575 #66757575 0000000A
EnvironmentLayeredBackground Tło dla elementów warstwowych, takich jak InfoBars i grupy kart #80FFFFFF #4D3A3A3A 00000005
EnvironmentLayeredBorder Obramowanie dla elementów warstwowych, takich jak InfoBars i znaczki #0F000000 #80000000 00000010
EnvironmentLogo Visual Studio wypełnienie logo w menu systemowym #FF5649B0 #FF9184EE 0000000D
EnvironmentTab Tło nagłówka aktywnej karty, oddzielone od nagłówków okna i okna narzędzi #FFF9F9F9 #FF282828 00000005
EnvironmentTabInactive Tło nagłówka nieaktywnej karty, oddzielone od nagłówków okna i okna narzędzi #FFF9F9F9 #FF282828 00000005

Podpis

Tokeny dla przycisku zamykania okna.

Token Description Jasny Ciemny duży kontrast
CaptionControlCloseFillPrimary Zamknij tło przycisku (zatrzymaj wskaźnik myszy) #FFC42B1C #FFC42B1C 0000000D
CaptionControlCloseFillSecondary Zamknij tło przycisku (naciśnięty) #E6C42B1C #E6C42B1C 0000000D
CaptionControlCloseTextFillPrimary Kolor ikony przycisku zamykania (umieść wskaźnik myszy) #FFFFFFFF #FFFFFFFF 00000009
CaptionControlCloseTextFillSecondary Kolor ikony zamykania przycisku (naciśnięcie) #B3FFFFFF #B3FFFFFF 00000009

Pasek stanu

Tokeny dla paska stanu w różnych trybach.

Token Description Jasny Ciemny duży kontrast
StatusBarBackgroundFillBuilding Tło paska stanu podczas kompilowania #FF5649B0 #FF3F3682 00000005
StatusBarBackgroundFillDebugging Tło paska stanu podczas debugowania #FFBC4B09 #FF7A2101 00000005
StatusBarBackgroundFillRest Tło paska stanu w stanie domyślnym #8B000000 #4D000000 00000005
StatusBarBackgroundFillSolutionLoading Tło paska stanu podczas ładowania rozwiązania #FF005BA1 #FF003B6A 00000005
StatusBarControlFillSecondary Wypełnienie pomocniczej kontrolki na pasku stanu #33000000 #20FFFFFF 0000000E
StatusBarTextFillBuilding Tekst paska stanu podczas kompilowania #FFFFFFFF #FFFFFFFF 00000008
StatusBarTextFillDebugging Tekst paska stanu podczas debugowania #FFFFFFFF #FFFFFFFF 00000008
StatusBarTextFillDisabled Wyłączony tekst paska stanu #90FFFFFF #5DFFFFFF 00000011
StatusBarTextFillRest Tekst paska stanu w stanie domyślnym #FFFFFFFF #FFFFFFFF 00000008
StatusBarTextFillSolutionLoading Tekst paska stanu podczas ładowania rozwiązania #FFFFFFFF #FFFFFFFF 00000008

Odwołanie do koloru systemu o wysokim kontraście

Wysokie wartości kontrastu to indeksy kolorów systemowych. Visual Studio mapuje je na aktywny schemat kolorów dużego kontrastu użytkownika. Typowe indeksy:

Indeks Kolor systemu
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