ist jetzt verfügbar! Lesen Sie über die neuen Funktionen und Fehlerbehebungen vom November.

Farbschema

Die Farben, die in der Benutzeroberfläche von Visual Studio Code sichtbar sind, fallen in zwei Kategorien

  • Workbench-Farben, die in Ansichten und Editoren verwendet werden, von der Aktivitätsleiste bis zur Statusleiste. Eine vollständige Liste aller dieser Farben finden Sie in der Referenz zu Theme-Farben.
  • Syntaxfarben und -stile, die für Quellcode im Editor verwendet werden. Das Theming dieser Farben ist anders, da die Syntaxfarbgebung auf TextMate-Grammatiken und TextMate-Themes sowie auf semantische Tokens basiert.

Dieser Leitfaden behandelt die verschiedenen Möglichkeiten, wie Sie Themes erstellen können.

Workbench-Farben

Der einfachste Weg, ein neues Workbench-Farbthema zu erstellen, ist, mit einem vorhandenen Farbthema zu beginnen und es anzupassen. Wechseln Sie zuerst zum Farbthema, das Sie ändern möchten, öffnen Sie dann Ihre Einstellungen und nehmen Sie Änderungen an der Einstellung workbench.colorCustomizations vor. Änderungen werden live auf Ihre VS Code-Instanz angewendet.

Das Folgende würde beispielsweise die Hintergrundfarbe der Titelleiste ändern

{
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#ff0000"
  }
}

Eine vollständige Liste aller thematisierbaren Farben finden Sie in der Farbreferenz.

Syntaxfarben

Für Syntaxhervorhebungsfarben gibt es zwei Ansätze. Sie können sich auf ein vorhandenes TextMate-Theme (.tmTheme-Datei) aus der Community beziehen oder Ihre eigenen Theming-Regeln erstellen. Der einfachste Weg ist, mit einem vorhandenen Theme zu beginnen und es anzupassen, ähnlich wie im Abschnitt Workbench-Farben oben.

Wechseln Sie zuerst zum anzupassenden Farbthema und verwenden Sie die Einstellungen editor.tokenColorCustomizations. Änderungen werden live auf Ihre VS Code-Instanz angewendet, und es ist kein Aktualisieren oder Neuladen erforderlich.

Beispielsweise würde das Folgende die Farbe von Kommentaren im Editor ändern

{
  "editor.tokenColorCustomizations": {
    "comments": "#FF0000"
  }
}

Die Einstellung unterstützt ein einfaches Modell mit einer Reihe von gängigen Token-Typen wie 'comments', 'strings' und 'numbers', die verfügbar sind. Wenn Sie mehr als das einfärben möchten, müssen Sie TextMate-Theme-Regeln direkt verwenden, die im Syntax Highlighting Guide detailliert erläutert werden.

Semantische Farben

Semantische Hervorhebung ist für TypeScript und JavaScript in der VS Code-Version 1.43 verfügbar. Wir erwarten, dass sie bald von anderen Sprachen übernommen wird.

Die semantische Hervorhebung bereichert die Syntaxfärbung auf der Grundlage von Symbolinformationen aus dem Sprachdienst, der ein vollständigeres Verständnis des Projekts hat. Die Farbänderungen erscheinen, sobald der Sprachserver läuft und die semantischen Tokens berechnet hat.

Jedes Theme steuert, ob die semantische Hervorhebung mit einer bestimmten Einstellung aktiviert wird, die Teil der Theme-Definition ist. Der Stil jedes semantischen Tokens wird durch die Styling-Regeln des Themes definiert.

Benutzer können die Funktion zur semantischen Hervorhebung und die Farbgebungsregeln mit der Einstellung editor.tokenColorCustomizations überschreiben

Semantische Hervorhebung für ein bestimmtes Theme aktivieren

"editor.tokenColorCustomizations": {
    "[Material Theme]": {
        "semanticHighlighting": true
    }
},

Themes können Theming-Regeln für semantische Tokens definieren, wie im Syntax Highlighting Guide beschrieben.

Ein neues Farbthema erstellen

Nachdem Sie Ihre Theme-Farben mit workbench.colorCustomizations und editor.tokenColorCustomizations optimiert haben, ist es Zeit, das eigentliche Theme zu erstellen.

  1. Generieren Sie eine Theme-Datei mit dem Befehl Entwickler: Farbthema aus aktuellen Einstellungen generieren aus der Befehlspalette

  2. Verwenden Sie den Yeoman Extension Generator von VS Code, um eine neue Theme-Erweiterung zu generieren

    npm install -g yo generator-code
yo code

  3. Wenn Sie ein Theme wie oben beschrieben angepasst haben, wählen Sie 'Frisch starten'.

    yo code theme

  4. Kopieren Sie die Theme-Datei, die aus Ihren Einstellungen generiert wurde, in die neue Erweiterung.

Sie können auch ein vorhandenes TextMate-Theme verwenden, indem Sie dem Extension Generator mitteilen, eine TextMate-Theme-Datei (.tmTheme) zu importieren und sie für die Verwendung in VS Code zu paketieren. Alternativ, wenn Sie das Theme bereits heruntergeladen haben, ersetzen Sie den Abschnitt tokenColors durch einen Link zur .tmTheme-Datei zur Verwendung.

{
  "type": "dark",
  "colors": {
    "editor.background": "#1e1e1e",
    "editor.foreground": "#d4d4d4",
    "editorIndentGuide.background": "#404040",
    "editorRuler.foreground": "#333333",
    "activityBarBadge.background": "#007acc",
    "sideBarTitle.foreground": "#bbbbbb"
  },
  "tokenColors": "./Diner.tmTheme"
}

Tipp: Geben Sie Ihrer Farbdefinitionsdatei die Suffix -color-theme.json und Sie erhalten Hover-Informationen, Code-Vervollständigung, Farbdekorationen und Farbwähler beim Bearbeiten.

Tipp: ColorSublime hat Hunderte von vorhandenen TextMate-Themes zur Auswahl. Wählen Sie ein Theme, das Ihnen gefällt, und kopieren Sie den Download-Link für die Verwendung im Yeoman-Generator oder in Ihrer Erweiterung. Es wird in einem Format wie "https://raw.githubusercontent.com/Colorsublime/Colorsublime-Themes/master/themes/(name).tmTheme" sein.

Ein neues Farbthema testen

Um das neue Theme auszuprobieren, drücken Sie F5, um ein Extension Development Host-Fenster zu starten.

Öffnen Sie dort den Farbmodus-Auswahl mit Datei > Einstellungen > Theme > Farbthema und Sie sehen Ihr Theme in der Dropdown-Liste. Pfeilen Sie nach oben und unten, um eine Live-Vorschau Ihres Themes zu sehen.

select my theme

Änderungen an der Theme-Datei werden live im Extension Development Host-Fenster angewendet.

Veröffentlichen eines Themes im Extension Marketplace

Wenn Sie Ihr neues Theme mit der Community teilen möchten, können Sie es im Extension Marketplace veröffentlichen. Verwenden Sie das vsce Publishing-Tool, um Ihr Theme zu verpacken und im VS Code Marketplace zu veröffentlichen.

Tipp: Damit Benutzer Ihr Theme leicht finden können, fügen Sie das Wort "theme" in die Erweiterungsbeschreibung ein und setzen Sie die Category auf Themes in Ihrer package.json.

Wir haben auch Empfehlungen, wie Sie Ihre Erweiterung im VS Code Marketplace gut aussehen lassen können, siehe Marketplace Presentation Tips.

Hinzufügen einer neuen Farb-ID

Farb-IDs können auch von Erweiterungen über den Farbbeitragspunkt beigetragen werden. Diese Farben erscheinen auch, wenn Sie die Code-Vervollständigung in den workbench.colorCustomizations-Einstellungen und der Farbthema-Definitionsdatei verwenden. Benutzer können sehen, welche Farben eine Erweiterung definiert, im Tab Erweiterungsbeiträge.

Weiterführende Lektüre

12/10/2025
© . This site is unofficial and not affiliated with Microsoft.