it-swarm.com.de

Wie füge ich ein Thema in Visual Studio Code hinzu?

Ich habe vor kurzem den VS-Code-Editor heruntergeladen, der wirklich nett ist. Aber das einzige Problem, das ich darin finde, ist das Farbthema. Ich bin es gewohnt, ein Monokai-Farbthema wie in erhabenem Text zu verwenden, und ich kann keine Möglichkeit finden, das Farbthema zu bearbeiten oder ein Farbthema herunterzuladen. Es gibt nur zwei Optionen:

  1. Dunkles Thema
  2. Lichtthema

Wie kann ich ein eigenes Thema hinzufügen oder ein vorhandenes duplizieren, damit ich das Farbschema nach meinen Wünschen bearbeiten kann?


Ich schaffe es, einige der Farben in der folgenden Datei zu ändern, aber ich weiß immer noch nicht, wie ich ein komplett neues Thema hinzufügen kann:

resources/app/client/vs/monaco/ui/workbench/native/native.main.css

Es sieht so aus, als ob Farbthemen bald verfügbar sein werden und Teil eines Pluginsystems sein werden

visual-studio-code/suggestions/7756227-theme

34
talsibony

Visual Studio Code 0.9.0 und höher

Es gibt eine offizielle Dokumentation zum Hinzufügen eines benutzerdefinierten Themas: https://github.com/Microsoft/vscode-docs/blob/0.9.0/release-notes/latest.md

Sie benötigen eine .tmtheme - Datei, um sie hinzuzufügen. Sie können vorhandene Dateien finden, z. auf GitHub ColorSublime oder Sie können Ihre eigene Designdatei definieren (zum Beispiel mit https://github.com/aziz/tmTheme-Editor ).

Nachdem Sie eine .tmtheme - Datei gefunden haben, haben Sie zwei Möglichkeiten, eine darauf basierende Erweiterung zu erstellen.

Option 1: Verwenden eines Yeoman-Generators

  • Installieren Sie node.js (falls noch nicht geschehen)
  • Installieren Sie yo (falls noch nicht geschehen), indem Sie npm install -g yo Ausführen.
  • Installieren Sie den Yo-Generator für Code: npm install -g generator-code
  • Führen Sie yo code Aus und wählen Sie New Color Theme Aus.
  • Folgen Sie den Anweisungen (definieren Sie die Datei .tmTheme, Den Namen des Themas, das UI-Thema usw.)
  • Der Generator erstellt ein Verzeichnis für Ihre Erweiterung mit dem Namen des Themas in Ihrem aktuellen Arbeitsverzeichnis.

Option 2: Erstellen Sie das Verzeichnis selbst

  • Erstellen Sie ein Verzeichnis mit dem Namen Ihres Plugins (nur Kleinbuchstaben). Nehmen wir an, wir nennen es mytheme.
  • Fügen Sie einen Unterordner themes hinzu und platzieren Sie die Datei .tmTheme Darin
  • Erstellen Sie eine Datei package.json Im Stammverzeichnis des Erweiterungsordners mit dem folgenden Inhalt

    {        
        "name": "theme-mytheme",
        "version": "0.0.1",
        "engines": {
            "vscode": ">=0.9.0-pre.1"
        },
        "publisher": "me",
       "contributes": {
            "themes": [
                {
                    "label": "My Theme",
                    "uiTheme": "vs-dark", // use "vs" to select the light UI theme
                    "path": "./themes/mytheme.tmTheme"
                }
            ]
        }
    }
    

Fügen Sie schließlich Ihre Erweiterung zu Visual Studio Code hinzu

Kopieren Sie den Erweiterungsordner in das Erweiterungsverzeichnis. Das ist:

  • unter Windows %USERPROFILE%\.vscode\extensions

  • unter Mac/Linux $HOME/.vscode/extensions

Starten Sie VSCode neu und wählen Sie das neue Thema in File -> Preferences -> Color Theme

Visual Studio Code 0.8.0

Es ist möglich, neue Designs in Visual Studio Code 0.8.0 (für Insider am 31.08.2015 freigegeben) hinzuzufügen [werden Sie zum Insider: https://www.instant.ly/s/Y5nt1/nav#p/ 186a0] ).

Führen Sie nach der Installation von VSCode 0.8.0 oder höher die folgenden Schritte aus, um Ihr eigenes Thema anzuwenden:

  1. Laden Sie eine .tmTheme - Datei herunter oder erstellen Sie eine eigene (zum Beispiel mit https://github.com/aziz/tmTheme-Editor )
  2. Kopieren Sie die Datei .tmTheme Nach %CODEFOLDER%/resources/app/plugins/vs.theme.starterkit/themes
  3. Registrieren Sie die Datei .tmTheme In %CODEFOLDER%/resources/app/plugins/vs.theme.starterkit/ticino.plugin.json, Indem Sie einen Eintrag wie folgt hinzufügen:

    {
        "id": "vs-theme-mynewtheme", // internal ID
        "label": "MyNewTheme",       // displayed name for the theme
        "uiTheme": "vs-dark",        // general UI appeareance (
                                     // "vs" for light themes, 
                                     // "vs-dark" for dark themes)
        "path": "./themes/myNewTheme.tmTheme" // file path 
    },  
    
  4. Starten Sie VSCode neu und wählen Sie das neue Thema in File -> Preferences -> Color Theme

47
Wosi

Das Hinzufügen eines komplett neuen Themas wird derzeit nicht unterstützt. Sie können Ihre Feature-Anfragen hier einreichen. Ich habe bereits gehört, dass Leute danach gefragt haben https://visualstudio.uservoice.com/forums/293070-visual-studio-code

12
Isidor Nikolic

Ich habe festgestellt, dass die Datei resources/app/client/vs/monaco/ui/workbench/native/native.main.css auch der richtige Ort ist, um die Darstellung von Schriftarten zu ändern. Ich habe versucht herauszufinden, wie die Schriftglättung unter OS X deaktiviert werden kann, und habe festgestellt, dass Sie dies hier tun können, indem Sie diese CSS-Regel in die Datei einfügen.

.monaco-editor {
  -webkit-font-smoothing: none;  
}
6
tatx