Wie bearbeite ich ein dunkles Standarddesign für Visual Studio Code?


87

Ich verwende Windows 7 64-Bit.

Gibt es eine Möglichkeit, das dunkle Standarddesign im Visual Studio-Code zu bearbeiten? Im %USERPROFILE%\.vscodeOrdner befinden sich nur Themen aus den Erweiterungen, während im Installationspfad (ich habe Standard verwendet C:\Program Files (x86)\Microsoft VS Code) Dateien mit einigen Standardthemen \resources\app\extensionswie Kimbie Dark, Solarized Dark / Light oder Varianten von Monokai vorhanden sind, aber es gibt kein Standard-Dunkelthema.

Aber wenn es doch eine Möglichkeit gibt, es zu bearbeiten, welche Codeblöcke sind dann für die Farbe des Mitglieds des Objekts, des Mitglieds des Zeigers und den Namen der Klasse und Struktur in der C ++ - Sprache verantwortlich?


4
Für alle, die hierher kommen: Sie müssen keine Themendateien suchen und ändern oder erstellen. Alles kann mit workbench.colorCustomizationsund editor.tokenColorCustomizationsin den Benutzereinstellungen geändert werden : code.visualstudio.com/docs/getstarted/… .
Chipit24

Man könnte sich auch für eine veraltete, aber an einer Funktion arbeitende Funktion halten, mit der wir benutzerdefiniertes globales CSS hinzufügen können, wie z. B. Die Atoms Edit -> Stylesheet...letzte Änderung des Problems war March github.com/Microsoft/vscode/issues/459 . Es ist enttäuschend, dass es für Kommentare geschlossen ist. Die aktuelle API erlaubt keine Erweiterung zum Ändern von globalem CSS. Daher müssen wir warten oder CSS wie Caveman manuell in die Entwicklertools einfügen.
Ray Foss

Antworten:


45

Die gesuchte Datei befindet sich in:

Microsoft VS-Code \ Ressourcen \ App \ Erweiterungen \ Theme-Defaults \ Themes

unter Windows und suchen Sie nach dem Dateinamen dark_vs.json, um ihn auf einem anderen System zu finden.


Aktualisieren:

Bei neuen Versionen von VSCode müssen Sie nicht nach der Einstellungsdatei suchen, um das Thema anzupassen. Jetzt können Sie Ihr Farbthema mit den Einstellungen workbench.colorCustomizationsund und den editor.tokenColorCustomizationsBenutzereinstellungen anpassen . Dokumentation zu diesem Thema finden Sie hier .


11
Unter Linux ist es in/usr/share/code/resources/app/extensions/theme-defaults/themes
sigalor

1
Unter Arch Linux ist es (Open-Source-Version) in/usr/lib/code/extensions/theme-defaults/themes
hendalst

3
Standardmäßig wird VS Code unter C: \ Benutzer \ {Benutzername} \ AppData \ Local \ Programme \ Microsoft VS Code
Toivo Säwén

2
Das Update dieser Antwort ist eine gute Empfehlung. Ich habe festgestellt, dass wenn Sie die Themendateien direkt bearbeiten, diese bei einem Update auf VS Code überschrieben werden können / werden.
cniggeler

72

Im VS-Code 'Benutzereinstellungen' können Sie sichtbare Farben mit den folgenden Tags bearbeiten (dies ist ein Beispiel und es gibt viel mehr Tags).

"workbench.colorCustomizations": {
    "list.inactiveSelectionBackground": "#C5DEF0",
    "sideBar.background": "#F8F6F6",
    "sideBar.foreground": "#000000",
    "editor.background": "#FFFFFF",
    "editor.foreground": "#000000",
    "sideBarSectionHeader.background": "#CAC9C9",
    "sideBarSectionHeader.foreground": "#000000",
    "activityBar.border": "#FFFFFF",
    "statusBar.background": "#102F97",
    "scrollbarSlider.activeBackground": "#77D4CB",
    "scrollbarSlider.hoverBackground": "#8CE6DA",
    "badge.background": "#81CA91"}

Wenn Sie einige C ++ - Farbtoken bearbeiten möchten, verwenden Sie das folgende Tag:

"editor.tokenColorCustomizations": {
    "numbers": "#2247EB",
    "comments": "#6D929C",
    "functions": "#0D7C28"
}

1
Aber was mache ich, wenn es jenseits von tokenColorCustomizations liegt?
Alex

Wo findet man eine Liste aller verfügbaren Optionen in "editor.tokenColorCustomizations"?
Ololobus


Meine Bearbeitung wurde aus irgendeinem Grund abgelehnt. Um diese Antwort speziell auf den Wunsch des OP zu richten, ein bestimmtes Thema zu ändern, können Sie das Thema angeben und die Farben ändern, ohne die Dateien des Themas zu ändern: "workbench.colorCustomizations": {"[Kimbie Dark]" : {"activityBar.foreground": "# 472c0c"}}
aamarks

In den Einstellungen heißt es "Workbench: Farbanpassungen"
Zach Saucier

28

In Bezug auf die Themen ist VS Code genauso bearbeitbar wie Sublime. Sie können jedes der mit VS-Code gelieferten Standardthemen bearbeiten. Sie müssen nur wissen, wo sich die Themendateien befinden.

Randnotiz: Ich liebe das Monokai-Thema. Alles, was ich daran ändern wollte, war der Hintergrund. Ich mag den dunkelgrauen Hintergrund nicht. Stattdessen denke ich, dass der Kontrast mit einem festen schwarzen Hintergrund viel besser ist. Der Code erscheint viel mehr.

Wie auch immer, ich habe nach der Themendatei gesucht und sie (in Windows) gefunden unter:

c: \ Programme (x86) \ Microsoft VS-Code \ Ressourcen \ App \ Erweiterungen \ Theme-Monokai \ Themes \

In diesem Ordner habe ich die Datei Monokai.tmTheme gefunden und den ersten Hintergrundschlüssel wie folgt geändert:

<key>background</key>
<string>#000000</string>

Die Themendatei enthält einige Hintergrundschlüssel. Stellen Sie sicher, dass Sie den richtigen bearbeiten. Der, den ich bearbeitet habe, war ganz oben. Zeile 12 denke ich.


5
Ubuntu Installationsorte sind wie/usr/share/code/resources/app/extensions/theme-defaults/themes/dark_vs.json
Max

4
Und für Mac fand ich, dass das Aktualisieren von Dateien in diesen Pfaden funktioniert: /Users/user-name/.vscode/extensions/azemoh.one-monokai-0.3.3/themes/OneMonokai-color-theme.jsoncmd + shift + p und reload window
tippe cmd

1
Das Ändern des Hintergrunds des Themas kann auch über "workbench.colorCustomizations": { "[Theme You Want to Update]": { "editor.background": "#000000" }In Benutzereinstellungen erfolgen.
Bilbo

Für 64-Bit-VS-Code unter Windows ist der Basispfad C:\Program Files\Microsoft VS Code\resources\app\extensions\ normalerweise gefolgt vontheme-....
Peter B

Ändern Sie das Thema in den Benutzereinstellungen mit "workbench.colorCustomizations": { "editor.background": "#000" },. Hier sind die verschiedenen Anpassungen, die Sie vornehmen können: code.visualstudio.com/api/references/theme-color
Jeremy Moritz

17

Sie können ein Standardthema nicht "bearbeiten", sie sind "gesperrt".

Sie können es jedoch mit genau den gewünschten Änderungen in Ihr eigenes benutzerdefiniertes Thema kopieren.

Weitere Informationen finden Sie in den folgenden Artikeln: https://code.visualstudio.com/Docs/customization/themes https://code.visualstudio.com/docs/extensions/install-extension#_your-extensions-folder

Wenn Sie nur die Farben für C ++ - Code ändern möchten, sollten Sie den C ++ - Support-Colorizer überschreiben. Informationen dazu finden Sie hier: https://code.visualstudio.com/docs/customization/colorizer

BEARBEITEN: Das dunkle Thema finden Sie hier: https://github.com/Microsoft/vscode/tree/80f8000c10b4234c7b027dccfd627442623902d2/extensions/theme-colorful-defaults

EDIT2: Zur Verdeutlichung:


1
Und woher kann ich es kopieren? In Artikeln, die Sie mir geschickt haben, gibt es nichts darüber. Und ich möchte nichts für so eine triviale Sache wie das Ändern der Syntaxhervorhebung ein wenig installieren - besonders wenn ich einfach die richtige Datei öffnen und ein paar Codezeilen ändern könnte, wenn das Standarddesign nicht gesperrt wäre. Außerdem benötigt das Generieren eines neuen Themas mit Yeoman Generator die .tmTheme-Datei eines anderen Themas - es gibt kein dunkles Visual Studio-Thema auf der ColorSublime-Website und ich habe keinen Zugriff auf das "gesperrte" von VSC.
Toreno96

Vielleicht könnte ich die c ++. Plist-Datei unter "C: \ Programme (x86) \ Microsoft VS-Code \ resources \ app \ extensions \ cpp" bearbeiten? Aber welche Codeblöcke soll ich ändern? Oder gibt es irgendwo eine Quelldatei des dunklen VSC-Standardthemas, mit der ich mein eigenes benutzerdefiniertes Thema erstellen kann?
Toreno96

Sie können es nicht bearbeiten, da es meiner Meinung nach im Quellcode gespeichert ist. Sie können es jedoch kopieren / einfügen und einige Zeilen ändern. Es befindet sich auf dem GitHub. Ich habe es für Sie gefunden: github.com/Microsoft/vscode/tree/… Bearbeitete Antwort mit Link
Tobiah Zarlez

Es ist möglich, die erwähnte c ++. Plist-Datei zu bearbeiten, das habe ich überprüft. Und ich habe aus einem Artikel über Colorizer verstanden, dass es sich um eine Standard-Colorizer-Datei für die C ++ - Sprache handelt. Korrigiere mich, wenn ich falsch liege. Aber wenn Sie immer noch über das Bearbeiten des Standardthemas sprechen - ja, ich weiß, dass ich das nicht kann, habe ich aus Ihrer ersten Antwort einen Satz darüber verstanden. Vielen Dank für die Informationen zum Quellcode auf GitHub und Link - aber ich habe überprüft, und die Themen von dort sind nicht die Standardthemen, sondern modifizierte, farbenfrohere Variationen davon. Leider nicht so, wie ich es gerne hätte.
Toreno96

1
Aber zufällig habe ich herausgefunden, dass das "Xcodedefault" -Thema aus der Erweiterungsgalerie dieselbe Syntax hat, die das dunkle Standardthema hervorhebt. Da es sich jetzt im Erweiterungsordner auf meiner Festplatte befindet, kann ich es nach der Installation ändern, genau wie ich das Standard-Dark-Theme ändern wollte. Mein Problem ist also gelöst.
Toreno96

15

Am einfachsten ist es, die Benutzereinstellungen zu bearbeiten und anzupassen workbench.colorCustomizations

Bearbeiten von Farbanpassungen

Wenn Sie Ihr Thema machen möchten

Es besteht auch die Möglichkeit, das aktuelle *.color-theme.jsonDesign zu ändern, wodurch die aktuellen Designeinstellungen kopiert und als JSON5-Datei gespeichert werden

Generieren Sie ein Farbthema aus den aktuellen Einstellungen


1
Möchten Sie Ihre Antwort nachbestellen, damit die bessere und einfachere Antwort zuerst kommt? =]
Relequestual

14

Jedes Farbthema kann in diesem Einstellungsabschnitt in VS Code Version 1.12 oder höher geändert werden:

 // Overrides colors from the currently selected color theme.
  "workbench.colorCustomizations": {}

Siehe https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme

Verfügbare Werte zum Bearbeiten: https://code.visualstudio.com/docs/getstarted/theme-color-reference

BEARBEITEN: Informationen zum Ändern der Syntaxfarben finden Sie hier: https://code.visualstudio.com/docs/extensions/themes-snippets-colorizers#_syntax-highlighting-colors und hier: https://www.sublimetext.com/docs/ 3 / scope_naming.html


Damit können Sie die Farben des Editors selbst überschreiben, aber nicht die Farben einiger Schlüsselwörter (z. B. Zeichenfolgenfarbe).
Jhegs

5

Wie bereits erwähnt, müssen Sie editor.tokenColorCustomizationsdie workbench.colorCustomizationsEinstellung in der Datei settings.json überschreiben . Hier können Sie ein Basisthema wie Abyss auswählen und nur die Dinge überschreiben, die Sie ändern möchten. Sie können entweder sehr wenige Dinge wie die Funktion, die Zeichenfolgenfarben usw. sehr einfach überschreiben.

ZB für workbench.colorCustomizations

"workbench.colorCustomizations": {
    "[Default Dark+]": {
        "editor.background": "#130e293f",
    }
}

ZB für editor.tokenColorCustomizations:

"editor.tokenColorCustomizations": {
    "[Abyss]": {
        "functions": "#FF0000",
        "strings": "#FF0000"
    }
}
// Don't do this, looks horrible.

Bei umfangreichen Anpassungen wie dem Ändern der Farbe des varSchlüsselworts müssen Sie jedoch die Überschreibungswerte unter dem textMateRulesSchlüssel angeben .

ZB unten:

"editor.tokenColorCustomizations": {
    "[Abyss]": {
        "textMateRules": [
            {
                "scope": "keyword.operator",
                "settings": {
                    "foreground": "#FFFFFF"
                }
            },
            {
                "scope": "keyword.var",
                "settings": {
                    "foreground": "#2871bb",
                    "fontStyle": "bold"
                }
            }
        ]
    }
}

Sie können Themen auch global überschreiben:

"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": [
                //following will be in italics (=Pacifico)
                "comment",
                "entity.name.type.class", //class names
                "keyword", //import, export, return…
                //"support.class.builtin.js", //String, Number, Boolean…, this, super
                "storage.modifier", //static keyword
                "storage.type.class.js", //class keyword
                "storage.type.function.js", // function keyword
                "storage.type.js", // Variable declarations
                "keyword.control.import.js", // Imports
                "keyword.control.from.js", // From-Keyword
                //"entity.name.type.js", // new … Expression
                "keyword.control.flow.js", // await
                "keyword.control.conditional.js", // if
                "keyword.control.loop.js", // for
                "keyword.operator.new.js", // new
            ],
            "settings": {
                "fontStyle": "italic"
            }
        }
    ]
}

Weitere Details finden Sie hier: https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide


5

Lösung für MAC OS

Ich bin mir nicht sicher, ob diese Antwort hier passt, aber ich möchte eine Lösung für MAC-Benutzer freigeben, und es sieht unangenehm aus, wenn ich eine neue Frage beginne und mich dort selbst beantworte.


Suchen Sie nach Ihrem VSCode-Themenpfad wie folgt:

..Ihr_Installationsort / Visual Studio Code.app/Contents/Resources/app/extensions/theme-name/themes/theme_file.json

Öffnen Sie die JSON-Datei und suchen Sie nach den zu ändernden Zielstilen.
In meinem Fall möchte ich die Farbe des Leerzeichen-Renderings ändern.
Ich habe sie
"editorWhitespace.foreground"
unter settings.jsonVisual Studio-Code gefunden.
Ich habe die folgenden Zeilen hinzugefügt (in den Arbeitsbereichseinstellungen):

"workbench.colorCustomizations": {
    "editorWhitespace.foreground": "#93A1A130" // stand as #RRGGBBAA
}

Lösungen geleitet von: https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme


Vergessen Sie nicht, ⌘ Command+ Sdie Einstellungen zu speichern, um wirksam zu werden.


2

Die Dokumente haben jetzt einen ganzen Abschnitt darüber.

Wenn Sie den Befehl grundsätzlich npmzum Installieren yound Ausführen verwenden, erhalten yo codeSie einen kleinen textbasierten Assistenten. Eine der Optionen besteht darin, eine Kopie des Standard-Dunkelschemas zu erstellen und zu bearbeiten.


1

Ich bin hierher gekommen, um einen Weg zu finden, das Thema zu bearbeiten, konnte es aber auf meinem Mac nicht finden. Nach einem tiefen Tauchgang fand ich endlich den Installationsort:

~/.vscode/extensions

Alle Erweiterungen drin!


Diese Antwort ist gut, sie wurde zu Unrecht herabgestimmt.
Polymerase
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.