Modernizuj kolory motywu programu Visual Studio

Motywy programu Visual Studio wcześniej opierały się na szczegółowych tokenach kolorów specyficznych dla funkcji. W miarę upływu czasu takie podejście produkowało tysiące wartości na zamówienie i kolorów niestandardowych, co powodowało, że utrudniało zapewnienie spójności i dostępności. Aby rozwiązać ten problem, skompilowaliśmy system wokół jasnych zasad projektowania: mniej tokenów semantycznych w celu łatwiejszej konserwacji, przewidywalnych ramp kolorów w celu zapewnienia zrównoważonej dostępności oraz bardziej spójnych środowisk w programie Visual Studio, platformie Windows i innych narzędziach firmy Microsoft.

W tym artykule wyjaśniono, co się zmieniło i jak migrować poprzednie motywy, aby były zgodne z programem Visual Studio 2026.

Co się zmieniło

Przed programem Visual Studio 2022 wbudowany motyw programu Visual Studio zawierał około 34 kategorii i ok. 1806 tokenów kolorów. Rozszerzenia często dodają więcej funkcji. Ta gęstość spowodowała pewne wyzwania:

Wiele tokenów było prawie identycznych, różniących się tylko nieznacznie odcieniami lub jasnością, co prowadzi do wizualnego bałaganu i nieporozumień.
Poszczególne funkcje (takie jak CodeAnalysis, Diagnostyka, ManifestDesigner itp.) utworzyły własne unikatowe tokeny, co powoduje fragmentowanie i niespójne użycie kolorów.
Weryfikowanie kontrastu kolorów dla ułatwień dostępu było trudne ze względu na dużą liczbę wpisów niestandardowych.
Ogólne środowisko użytkownika stało się niespójne, a powierzchnie wydawały się niezgodne lub niezsynchroniczne.

Oto przykład kategorii i tokenów kolorów z motywu programu Visual Studio 2022:

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

Program Visual Studio 2026 konsoliduje tokeny do kilku kategorii z priorytetem intencji z przewidywalnymi poziomami nazewnictwa. Motyw powłoki standardowy zawiera teraz tylko cztery kategorie najwyższego poziomu i 229 tokenów kolorów, co stanowi redukcję o ok. 87%.

Dodatkowe tokeny semantyczne Fluent zapewniają bardziej szczegółową kontrolę nad obszarami powłoki. Na przykład tokeny EnvironmentHeader i EnvironmentTab umożliwiają autorom motywów niezależne ustawianie kolorów nagłówków okna i kart, niezależnie od innych elementów interfejsu powłoki.

Oto przykład semantycznych tokenów typu intent-first z motywu programu Visual Studio 2026:

<Theme ...>
<Category Name="Shell">
...
   <Color Name="ControlFillSecondary"> ... </Color>
   <Color Name="TextFillPrimary"> ... </Color>
   <Color Name="SolidBackgroundFillBase"> ... </Color>
...
</Category>
</Theme>

** Dlaczego mniej tokenów odblokowuje lepsze doświadczenie użytkownika

Nazewnictwo skoncentrowane na intencji: Nazwy tokenów wyraźnie odzwierciedlają swoją rolę (np. ControlFill, TextFill, AccentFill, Stroke, SystemFill) i poziomy (Primary, Secondary, Tertiary), co sprawia, że użycie jest intuicyjne.
Uproszczona paleta: Natychmiastowe aktualizowanie małego zestawu udostępnionych tokenów zwiększa spójność zarówno w powłoce, jak i rozszerzeniach.
Większa spójność: Mniejsza liczba punktów dostosowywania oznacza mniej przypadkowych niezgodności i eliminuje nieco różne warianty.
Ulepszona dostępność: Scentralizowane rampy kolorów i stany semantyczne (Powodzenie, Przestroga, Krytyczne, Uwaga) ułatwiają i bardziej niezawodną walidację kontrastu.
Lepsza wydajność i łatwość konserwacji: Warstwy semantyczne zastępują szczegółowe zestawy kolorów, zmniejszając nakład pracy konserwacyjnych i poprawiając jakość interfejsu użytkownika.

Dostosowywanie tokenów w Visual Studio

Visual Studio 2026 (18.7) dodaje stronę opcji kolorów motywu w środowisku IDE na potrzeby dostosowywania kolorów motywu interaktywnego. Użyj polecenia Edytuj kolory motywu lub otwórz Narzędzia > Opcje > Środowisko > Środowisko wizualne > Kolory motywu, aby wyświetlić tokeny kolorów motywu Fluent dla aktywnego motywu w siatce z funkcją wyszukiwania. Zmiany są stosowane na żywo, dzięki czemu można dostosowywać tokeny bez instalowania rozszerzenia, edytowania kodu JSON lub ponownego uruchamiania Visual Studio.

Strona uwidacznia te same tokeny semantyczne, które autorzy motywów definiują w pakiecie motywu, w tym tokeny dla edytora, okna narzędzi i powierzchni powłoki. Można wyszukiwać tokeny i resetować poszczególne wartości podczas sprawdzania, jak zmigrowany motyw reaguje na zmiany tokenów.

Przesłonięcia kolorów motywu są zapisywane dla wybranego motywu i stosowane jako warstwa na podstawie motywu podstawowego. Przełączanie motywów zmienia, który zestaw zastąpień jest aktywny. Te zachowania są przydatne podczas weryfikowania tokenów semantycznych lub dostosowywania kilku wartości bez tworzenia pełnego pakietu motywu. Jeśli użytkownicy przesłonią wartości tokenów po zainstalowaniu motywu, zresetowanie tych tokenów spowoduje przywrócenie wartości dostarczonych przez motyw.

Aby udostępnić nadpisania motywu, umieść plik JSON nazwany nazwą motywu w lokalizacji %LOCALAPPDATA%\Microsoft\VisualStudio\18.0_xxxxxxxx\ColorThemes. Visual Studio stosuje zmiany oparte na plikach po ponownym uruchomieniu środowiska IDE.

Migrowanie motywów do programu Visual Studio 2026

Poprzedni motyw można ustawić jako zgodny z programem Visual Studio 2026, scalając istniejące tokeny z małym zestawem nowych tokenów semantycznych. Nie trzeba ponownie utworzyć każdego poprzedniego tokenu. Program Visual Studio 2026 najpierw odczytuje nowe tokeny, a następnie wraca do poprzednich tokenów. Oto jak to zrobić:

Dodaj FallbackId="{Light or Dark theme GUID}" obiekt w <Theme /> obiekcie .

Motyw bazowy	FallbackId
Light	{de3dbbcd-f642-433c-8353-8f1df4370aba}
Ciemny	{1ded0138-47ce-435e-84ef-9ec1f439b749}

Dodaj poniższy zestaw tokenów jako dwie ostatnie kategorie po wcześniejszych tokenach motywu. Upewnij się, że nazwa kategorii i identyfikator GUID są kopiowane dokładnie tak, jak poniżej.

Minimalny zestaw początkowy tokenów dla jasnego motywu

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

Minimalny zestaw tokenów startowy dla motywu opartego na ciemnym

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

Dostosuj wartości kolorów, aby dopasować poprzedni motyw zgodnie z potrzebami.

Często zadawane pytania

Dlaczego była to zmiana powodująca zakłócenia?

Oprócz zmiany struktury tokenu koloru motywu i konwencji nazewnictwa większość kodu interfejsu użytkownika została refaktoryzowana w celu korzystania z semantycznych tokenów stylów z systemu Fluent Design, zamiast poprzednich tokenów o zakresie funkcji lub stylów wbudowanych. Chociaż większość starych kolorów i innych zasobów stylowych pozostaje obecnych w zestawie SDK, może nie odzwierciedlać najnowszego projektu lub zachowywać się spójnie w zmodernizowanym interfejsie użytkownika.

Czy mogę nadal używać poprzednich tokenów?

Poprzednie tokeny mogą nadal być rozpoznawane dla niektórych wcześniejszych powierzchni, ale nowe i przebudowane ścieżki interfejsu użytkownika odczytują najpierw nowe tokeny semantyczne. Jeśli korzystasz z przestarzałych tokenów, ryzykujesz niepełną realizację motywu.

Gdzie jest klasyczny motyw Niebieski?

Zastąpiliśmy ją rodziną motywów przyciemnianych i opcjami wyglądu edytora Extra Contrast. Możesz również zainstalować temat społeczności Blue Steel, aby lepiej oddać hołd.

Czy mniej tokenów oznacza mniej dostosowywania?

Nie, warstwy semantyczne pozwalają na tworzenie szerokich zmian wizualnych poprzez dostosowanie niewielkiej palety. Możesz nadal tworzyć odrębne osobowości za pomocą odcieni akcentu, stopni jasności tła oraz wypełnień systemowych.

Wpływ na wydajność?

Refaktoryzacja zmniejsza wyszukiwanie stylów i nadmiarowe zasoby, poprawia lokalność pamięci i upraszcza odroczone tworzenie pędzla.

Czy kolory edytora również się zmieniają?

Edytor zachowuje obecnie większość kolorowania składni. Ta zmiana dotyczy wspólnych elementów interfejsu powłoki, takich jak okna narzędzi, menu i okna dialogowe. Wygląd edytora (w tym dodatkowy kontrast) można wybrać niezależnie.

Last updated on 2026-09-02