Modernisieren von Visual Studio-Designfarben

Visual Studio-Designs basieren zuvor auf präzisen, featurespezifischen Farbtoken. Im Laufe der Zeit produzierte dieser Ansatz Tausende von maßgeschneiderten Werten und benutzerdefinierten Farben, wodurch Konsistenz und Barrierefreiheit schwieriger zu garantieren sind. Um dies zu beheben, haben wir das System um klare Entwurfsprinzipien neu aufgebaut: weniger semantische Token für eine einfachere Wartung, vorhersehbare Farbhierarchien für nachhaltige Barrierefreiheit und eine einheitlichere Erfahrung in Visual Studio, der Windows-Plattform und anderen Microsoft-Tools.

In diesem Artikel wird erläutert, was sich geändert hat und wie vorherige Themen migriert werden können, um mit Visual Studio 2026 kompatibel zu sein.

Was sich geändert hat

Vor Visual Studio 2022 enthielt ein vordefiniertes Visual Studio-Design ca. 34 Kategorien und ~1.806 Farbtoken. Erweiterungen fügten oft mehr hinzu. Diese Dichte hat einige Herausforderungen geschaffen:

• Viele Token waren nahezu identisch und unterscheiden sich nur geringfügig im Farbton oder in der Helligkeit, was zu visueller Unübersichtlichkeit und Verwirrung führt.
• Einzelne Features (z. B. CodeAnalysis, Diagnostics, ManifestDesigner usw.) haben eigene eindeutige Token erstellt, was zu fragmentierter und inkonsistenter Farbnutzung führt.
• Die Überprüfung des Farbkontrasts für die Barrierefreiheit war aufgrund der großen Anzahl von benutzerdefinierten Einträgen schwierig.
• Die allgemeine Benutzererfahrung wurde inkonsistent, da Oberflächen nicht übereinstimmend oder nicht synchronisiert angezeigt werden.

Hier sehen Sie ein Beispiel für Kategorien und Farbtoken aus einem Visual Studio 2022-Design:

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

Visual Studio 2026 konsolidiert Token in einer Handvoll intent-first-Kategorien mit vorhersagbaren Benennungsstufen. Ein Standard-Theme enthält jetzt nur noch vier Hauptkategorien und 229 Farb-Tokens – eine Reduzierung um ca. 87 %.

Zusätzliche Fluent-Semantiktoken bieten eine präzisere Kontrolle über Shellbereiche. Zum Beispiel ermöglichen die Tokens EnvironmentHeader und EnvironmentTab Designautoren, Fenster- und Tab-Überschriften unabhängig von anderen Elementen der Shell-Oberfläche einzufärben.

Nachfolgend sehen Sie ein Beispiel für semantische Absichtstoken aus einem Visual Studio 2026-Design:

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

Warum weniger Token eine bessere Benutzererfahrung verbessern

• Intent-first-Benennung: Tokennamen spiegeln ihre Rolle (z. B. ControlFill, TextFill, AccentFill, Stroke, SystemFill) und Ebene (Primär, Sekundär, Tertiär) deutlich wider, wodurch die Nutzung intuitiv ist.

• Vereinfachte Palette: Durch das sofortige Aktualisieren einer kleinen Gruppe freigegebener Token wird die Konsistenz sowohl in der Shell als auch in den Erweiterungen verbessert.

• Größere Konsistenz: Weniger Anpassungspunkte bedeuten weniger versehentliche Übereinstimmungen und beseitigen leicht unterschiedliche Varianten.

• Verbesserte Barrierefreiheit: Zentrale Farbhierarchien und semantische Zustände (Erfolg, Vorsicht, Kritisch, Aufmerksamkeit) erleichtern die Kontrastüberprüfung und sind zuverlässiger.

• Bessere Leistung und Wartung: Semantische Ebenen ersetzen granulare Farbsetter, reduzieren den Wartungsaufwand und verbessern die UI-Qualität.

Token in Visual Studio anpassen

Visual Studio 2026 (18.7) fügt in der IDE eine Optionsseite für Themenfarben zur interaktiven Anpassung von Themenfarben hinzu. Verwenden Sie den Befehl Designfarben bearbeiten, oder öffnen Sie Extras > Optionen > Umgebung > Visuelle Darstellung > Designfarben, um die Fluent-Designfarbtoken für das aktive Design in einem durchsuchbaren Raster anzuzeigen. Änderungen werden live angewendet, sodass Sie Token optimieren können, ohne eine Erweiterung zu installieren, JSON zu bearbeiten oder Visual Studio neu zu starten.

Die Seite macht dieselben semantischen Token verfügbar, die Designautoren in einem Designpaket definieren, einschließlich Token für Editor, Toolfenster und Shelloberflächen. Sie können Token durchsuchen und einzelne Werte zurücksetzen, während Sie überprüfen, wie Ihr migriertes Design auf Tokenänderungen reagiert.

Designfarbenüberschreibungen werden für das ausgewählte Design gespeichert und als Ebene über dem Basisdesign angewendet. Beim Wechseln des Themes ändert sich, welches Override-Set aktiv ist. Diese Verhaltensweisen sind nützlich, wenn Semantiktoken überprüft oder einige Werte angepasst werden, ohne ein vollständiges Designpaket zu erstellen. Wenn Benutzer Tokenwerte nach der Installation eines Designs überschreiben, werden durch das Zurücksetzen dieser Token die vom Design bereitgestellten Werte wiederhergestellt.

Um Theme-Überschreibungen zu teilen, legen Sie eine nach dem Theme benannte JSON-Datei in %LOCALAPPDATA%\Microsoft\VisualStudio\18.0_xxxxxxxx\ColorThemes ab. Visual Studio wendet dateibasierte Änderungen an, nachdem Sie die IDE neu gestartet haben.

Migrieren von Themes zu Visual Studio 2026

Sie können ein vorheriges Design mit Visual Studio 2026 kompatibel machen, indem Sie seine vorhandenen Token mit einem kleinen Satz neuer semantischer Token zusammenführen. Sie müssen nicht jedes vorherige Token neu erstellen. Visual Studio 2026 liest zuerst die neuen Token und greift dann auf vorherige Token zurück. So gehen Sie wie folgt vor:

1. FallbackId="{Light or Dark theme GUID}" Objekt bei dem <Theme /> Objekt hinzufügen.

2. Fügen Sie die folgende Gruppe von Token nach den vorherigen Themen-Token als letzte zwei Kategorien an. Stellen Sie sicher, dass der Kategoriename und die GUID genau wie unten kopiert werden.

Minimaler Token-Set-Starter für ein helles Thema

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

Minimaler Tokensatz Grundlagen für ein dunkel basiertes Design

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

3. Passen Sie die Farbwerte nach Bedarf an das vorherige Design an.

Häufig gestellte Fragen

Warum war dies eine bahnbrechende Änderung?

Neben Änderungen an der Struktur der Themenfarb-Token und der Namenskonvention wurde der größte Teil des UI-Codes so umgestaltet, dass semantische Stil-Token aus dem Fluent Design System anstelle der bisherigen funktionsbezogenen Token oder Inline-Stile verwendet werden. Während die meisten der alten Farb- und anderen Formatierungsressourcen im SDK vorhanden sind, spiegeln sie möglicherweise nicht das neueste Design wider oder verhalten sich konsistent in der modernisierten Benutzeroberfläche.

Kann ich die vorherigen Token weiterhin verwenden?

Frühere Token können für einige frühere Oberflächen weiterhin aufgelöst werden, aber neue und umgestaltete UI-Pfade lesen zuerst die neuen semantischen Token. Wenn Sie auf veraltete Token angewiesen sind, riskieren Sie ein unvollständiges Design.

Wo befindet sich das klassische blaue Thema?

Wir haben sie durch eine Reihe von farbtonierten Designs und Optionen für den ExtraKontrast-Editor ersetzt. Sie können auch das Community-Design "Blue Steel" installieren, wenn Sie eine größere Hommage wünschen.

Bedeuten weniger Token weniger Anpassungen?

Mit nicht-semantischen Ebenen können Sie durch Anpassen einer kleinen Palette umfassende visuelle Veränderungen erzielen. Sie können weiterhin individuelle Persönlichkeiten durch Akzentfarben, Hintergrundhelligkeitsstufen und Systemfüllungen gestalten.

Auswirkungen auf die Leistung?

Die Umgestaltung reduziert Stilsuchvorgänge und redundante Ressourcen, verbessert die Speicherlokalität und vereinfacht die verzögerte Pinselerstellung.

Ändern sich auch Editorfarben?

Der Editor behält derzeit den größten Teil der Syntaxfarbisierung bei. Diese Änderung zielt auf freigegebene Shell-UI-Oberflächen wie Toolfenster, Menüs und Dialogfelder ab. Sie können die Editordarstellung (einschließlich extra Kontrast) unabhängig auswählen.