Themen

Farbthemen

Farbthemen ermöglichen es Ihnen, die Farben der Benutzeroberfläche von Visual Studio Code an Ihre Präferenzen und Ihre Arbeitsumgebung anzupassen. Ein Farbthema beeinflusst sowohl die UI-Elemente von VS Code als auch die Farben für die Hervorhebung im Editor.

Um ein anderes Farbthema auszuwählen

1. Wählen Sie den Menüpunkt Datei > Einstellungen > Theme > Color Theme oder verwenden Sie den Befehl Preferences: Color Theme (⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T)), um die Farbschemaauswahl anzuzeigen.

2. Verwenden Sie die Tasten Auf und Ab, um durch die Liste zu navigieren und die Farben des Themas in der Vorschau anzuzeigen.

3. Wählen Sie das gewünschte Thema aus und drücken Sie Enter.

Das aktive Farbthema wird in Ihren Benutzereinstellungen gespeichert (Tastenkombination ⌘, (Windows, Linux Ctrl+,)).

  // Specifies the color theme used in the workbench.
  "workbench.colorTheme": "Solarized Dark"

Farbthemen aus dem Marketplace

VS Code verfügt über mehrere integrierte Farbthemen, die Sie ausprobieren können. Viele weitere Themen wurden von der Community in den VS Code Extension Marketplace hochgeladen.

Sie können Farbthemen direkt aus dem VS Code Marketplace über die Farbschemaauswahl auswählen, indem Sie Weitere Farbthemen durchsuchen... auswählen.

Alternativ können Sie im Erweiterungs-Explorer (Tastenkombination ⇧⌘X (Windows, Linux Ctrl+Shift+X)) nach Themen suchen, indem Sie den Filter @category:"themes" verwenden.

Automatisch wechseln basierend auf dem Farbschema des Betriebssystems

Windows und macOS unterstützen helle und dunkle Farbschemata. Es gibt eine Einstellung, window.autoDetectColorScheme, die VS Code anweist, auf Änderungen am Farbschema des Betriebssystems zu hören und entsprechend ein passendes Thema zu wechseln.

Ähnlich können Sie die Einstellung window.autoDetectHighContrast verwenden, um automatisch zu erkennen, ob das Betriebssystem zu einem kontrastreichen Farbschema gewechselt hat.

Um die Themen anzupassen, die bei einer Änderung des Farbschemas verwendet werden, können Sie die bevorzugten hellen, dunklen und kontrastreichen Themen im Einstellungseditor festlegen

• Workbench: Bevorzugtes dunkles Farbthema – Standardmäßig Dark Modern
• Workbench: Bevorzugtes helles Farbthema – Standardmäßig Light Modern
• Workbench: Bevorzugtes kontrastreiches dunkles Farbthema – Standardmäßig Dark High Contrast
• Workbench: Bevorzugtes kontrastreiches helles Farbthema – Standardmäßig Light High Contrast

Ein Farbthema anpassen

Workbench-Farben

Sie können Ihr aktives Farbthema mit den Benutzereinstellungen workbench.colorCustomizations und editor.tokenColorCustomizations anpassen.

Um die Farben von VS Code-UI-Elementen wie Listen und Bäumen (Explorer, Vorschlags-Widget), Diff-Editor, Aktivitätsleiste, Benachrichtigungen, Scrollleiste, Split-Ansicht, Schaltflächen usw. festzulegen, verwenden Sie workbench.colorCustomizations.

Sie können IntelliSense bei der Festlegung von Werten für workbench.colorCustomizations verwenden oder eine Liste aller anpassbaren Farben in der Referenz zu Themensfarben finden.

Um Anpassungen an einem bestimmten Thema vorzunehmen, verwenden Sie die folgende Syntax

"workbench.colorCustomizations": {
    "[Monokai]": {
        "sideBar.background": "#347890"
    }
}

Wenn eine Anpassung für mehr als ein Thema gilt, können Sie mehrere Themen benennen oder * als Platzhalter am Anfang und Ende des Namens verwenden

"workbench.colorCustomizations": {
    "[Abyss][Red]": {
        "activityBar.background": "#ff0000"
    },
    "[Monokai*]": {
        "activityBar.background": "#ff0000"
    }
}

Wenn ein Thema eine Farbe oder einen Rahmen festlegt, der Ihnen nicht gefällt, können Sie default verwenden, um ihn auf den ursprünglichen Wert zurückzusetzen

  "workbench.colorCustomizations": {
      "diffEditor.removedTextBorder": "default"
  }

Editor-Syntaxhervorhebung

Um die Syntaxhervorhebungsfarben des Editors abzustimmen, verwenden Sie editor.tokenColorCustomizations in Ihrer Benutzer-settings.json-Datei.

Eine vorkonfigurierte Reihe von Syntax-Token ('Kommentare', 'Strings', ...) ist für die gängigsten Konstrukte verfügbar. Wenn Sie mehr benötigen, können Sie dies tun, indem Sie TextMate-Regeln für die Farbgebung direkt angeben.

Um bestimmte Themen anzupassen, können Sie dies auf eine der folgenden Arten tun

"editor.tokenColorCustomizations": {
    "[Monokai]": {
        "comments": "#229977"
    },
    "[*Dark*]": {
        "variables": "#229977"
    },
    "[Abyss][Red]": {
        "keywords": "#f00"
    }
}

Semantische Hervorhebung im Editor

Einige Sprachen (derzeit: TypeScript, JavaScript, Java) bieten semantische Token. Semantische Token basieren auf dem Symbolverständnis des Sprachdienstes und sind genauer als die Syntax-Token aus den TextMate-Grammatiken, die von regulären Ausdrücken gesteuert werden. Die semantische Hervorhebung, die aus den semantischen Token berechnet wird, überlagert die Syntaxhervorhebung und kann die Hervorhebung wie im folgenden Beispiel gesehen korrigieren und bereichern.

Das Farbthema "Tomorrow Night Blue" ohne semantische Hervorhebung

Das Farbthema "Tomorrow Night Blue" mit semantischer Hervorhebung

Beachten Sie die Farbunterschiede basierend auf dem Symbolverständnis des Sprachdienstes

• Zeile 10: languageModes wird als Parameter gefärbt.
• Zeile 11: Range und Position werden als Klassen und document als Parameter gefärbt.
• Zeile 13: getFoldingRanges wird als Funktion gefärbt.

Die Einstellung editor.semanticHighlighting.enabled steuert hauptsächlich, ob die semantische Hervorhebung angewendet wird. Sie kann die Werte true, false und configuredByTheme haben.

• true und false schalten die semantische Hervorhebung für alle Themen ein oder aus.
• configuredByTheme ist der Standard und ermöglicht es jedem Thema zu steuern, ob die semantische Hervorhebung aktiviert ist oder nicht. Alle Themen, die mit VS Code geliefert werden (z. B. das Standardthema "Dark+"), haben die semantische Hervorhebung standardmäßig aktiviert.

Sie können die Theme-Einstellung überschreiben durch

"editor.semanticTokenColorCustomizations": {
    "[Rouge]": {
        "enabled": true
    }
}

Wenn die semantische Hervorhebung für eine Sprache aktiviert und verfügbar ist, liegt es am Thema, zu konfigurieren, ob und wie semantische Token gefärbt werden. Einige semantische Token sind standardisiert und werden gängigen TextMate-Scopes zugeordnet. Wenn das Thema eine Farbregel für diese TextMate-Scopes hat, werden die semantischen Token mit dieser Farbe gerendert, ohne dass zusätzliche Farbregeln erforderlich sind.

Zusätzliche Styling-Regeln können in editor.semanticTokenColorCustomizations" konfiguriert werden

"editor.semanticTokenColorCustomizations": {
    "[Rouge]": {
        "enabled": true,
        "rules": {
            "*.declaration": { "bold": true }
        }
    }
}

Um zu sehen, welche semantischen Token berechnet und wie sie gestylt werden, können Sie den Scope-Inspektor (Entwickler: Editor-Token und Scopes inspizieren) verwenden, der Informationen für den Text an der aktuellen Cursorposition anzeigt.

Wenn für die Sprache an der angegebenen Position semantische Token verfügbar sind und vom Thema aktiviert wurden, zeigt das Inspektionstool einen Abschnitt semantischer Token-Typ. Der Abschnitt zeigt die semantischen Token-Informationen (Typ und beliebige Modifikatoren) und die angewendeten Styling-Regeln an.

Weitere Informationen zu semantischen Token und Styling-Regeln finden Sie im Leitfaden Semantic Highlighting Guide.

Erstellen Sie Ihr eigenes Farbthema

Das Erstellen und Veröffentlichen einer Theme-Erweiterung ist einfach. Passen Sie Ihre Farben in Ihren Benutzereinstellungen an und generieren Sie dann mit dem Befehl Entwickler: Farbthema aus aktuellen Einstellungen generieren eine Theme-Definitionsdatei.

Der Yeoman-Erweiterungsgenerator von VS Code (extension generator) hilft Ihnen, den Rest der Erweiterung zu generieren.

Weitere Informationen finden Sie im Artikel Create a new Color Theme in unserem Abschnitt Extension API.

Standardmäßige Farbthemen entfernen

Wenn Sie einige der Standardthemen, die mit VS Code geliefert werden, aus der Farbschemaauswahl entfernen möchten, können Sie diese im Erweiterungs-Explorer (Tastenkombination ⇧⌘X (Windows, Linux Ctrl+Shift+X)) deaktivieren. Wählen Sie die Schaltfläche Erweiterungen filtern oben im Erweiterungs-Explorer, wählen Sie die Option Integriert, und Sie sehen einen Abschnitt THEMEN, der die Standardthemen auflistet.

Sie können eine integrierte Theme-Erweiterung deaktivieren, wie jede andere VS Code Erweiterung, mit dem Befehl Deaktivieren im Kontextmenü des Zahnrads.

Dateisymbolthemen

Dateisymbole kennzeichnen einen bestimmten Dateityp. Diese Symbole werden neben dem Dateinamen in der Explorer-Ansicht und in Tab-Headern angezeigt. Dateisymbolthemen können von Erweiterungen beigesteuert werden.

Um ein anderes Dateisymbolthema auszuwählen

1. Wählen Sie den Menüpunkt Datei > Einstellungen > Theme > File Icon Theme oder verwenden Sie den Befehl Preferences: File Icon Theme, um die Dateisymbolthema-Auswahl anzuzeigen.

2. Verwenden Sie die Tasten Auf und Ab, um durch die Liste zu navigieren und die Symbole des Themas in der Vorschau anzuzeigen.

3. Wählen Sie das gewünschte Thema aus und drücken Sie Enter.

Standardmäßig wird das Dateisymbolthema Seti verwendet, und das sind die Symbole, die Sie im Explorer sehen. VS Code merkt sich Ihre Auswahl des Dateisymbolthemas über Neustarts hinweg. Sie können Dateisymbole deaktivieren, indem Sie Keine auswählen.

VS Code wird mit zwei Dateisymbolthemen geliefert: Minimal und Seti. Um weitere Dateisymbolthemen zu installieren, wählen Sie den Eintrag Zusätzliche Dateisymbolthemen installieren in der Dateisymbolthema-Auswahl aus, wodurch die Erweiterungsansicht nach Symbolthemen gefiltert geöffnet wird.

Sie können auch direkt die VS Code Marketplace-Website durchsuchen, um verfügbare Themen zu finden.

Das aktive Dateisymbolthema wird in Ihren Benutzereinstellungen gespeichert (Tastenkombination ⌘, (Windows, Linux Ctrl+,)).

  // Specifies the file icon theme used in the workbench.
  "workbench.iconTheme": "vs-seti"

Erstellen Sie Ihr eigenes Dateisymbolthema

Sie können Ihr eigenes Dateisymbolthema aus Symbolen (vorzugsweise SVG) erstellen. Weitere Informationen finden Sie im Artikel File Icon Theme in unserem Abschnitt Extension API.

VS Code für das Web

VS Code für das Web bietet ein kostenloses, ohne Installation nutzbares VS Code-Erlebnis, das vollständig in Ihrem Browser unter https://vscode.dev läuft.

Sie können Farbthemen über VS Code für das Web über das URL-Schema teilen und erleben: https://vscode.dev/editor/theme/<extensionId>.

Zum Beispiel können Sie zu https://vscode.dev/editor/theme/sdras.night-owl gehen, um das Night Owl-Thema zu erleben, ohne den Download- und Installationsprozess durchlaufen zu müssen.

Weitere Informationen zum Vorschauen und Teilen von Themen finden Sie in der Dokumentation zu VS Code für das Web.

Produktsymbolthemen

Produktsymbolthemen ermöglichen es Ihnen, die Symbole in der Benutzeroberfläche von VS Code zu ändern, mit Ausnahme der Symbole für bestimmte Dateitypen. Sie können zum Beispiel die Symbole für die Ansichten in der Aktivitätsleiste oder die Symbole in der Titelleiste für die Änderung des Layouts ändern.

Beachten Sie im folgenden Bild, wie sich die Symbole der Aktivitätsleiste ändern, wenn Sie ein anderes Produktsymbolthema auswählen.

Um ein anderes Produktsymbolthema auszuwählen

1. Wählen Sie den Menüpunkt Datei > Einstellungen > Theme > Product Icon Theme oder verwenden Sie den Befehl Preferences: Product Icon Theme, um die Produktsymbolthema-Auswahl anzuzeigen.

2. Verwenden Sie die Tasten Auf und Ab, um durch die Liste zu navigieren und die Symbole des Themas in der Vorschau anzuzeigen.

3. Wählen Sie das gewünschte Thema aus und drücken Sie Enter.

Standardmäßig wird VS Code mit einem Produktsymbolthema, Default, geliefert. Sie können weitere Produktsymbolthemen direkt aus dem VS Code Marketplace über die Produktsymbolthema-Auswahl auswählen, indem Sie Weitere Produktsymbolthemen durchsuchen... auswählen.

Nächste Schritte

Themen sind nur eine Möglichkeit, VS Code anzupassen. Wenn Sie mehr über die Anpassung und Erweiterbarkeit von VS Code erfahren möchten, probieren Sie diese Artikel aus

• Einstellungen – Erfahren Sie, wie Sie VS Code über Benutzer- und Arbeitsbereichseinstellungen an Ihre Bedürfnisse anpassen können.
• Snippets – Fügen Sie Ihren bevorzugten Sprachen zusätzliche Snippets hinzu.
• Erweiterungs-API – Erfahren Sie mehr über andere Möglichkeiten, VS Code zu erweitern.
• Farbthema – Color Theme Extension API.
• Dateisymbolthema – File Icon Theme Extension API.