Come modificare il tema scuro predefinito per Visual Studio Code?


90

Sto usando Windows 7 a 64 bit.

C'è un modo per modificare il tema scuro predefinito nel codice di Visual Studio? Nella %USERPROFILE%\.vscodecartella ci sono solo temi dalle estensioni, mentre nel percorso di installazione (io ho usato quello predefinito C:\Program Files (x86)\Microsoft VS Code) ci sono file di alcuni temi standard \resources\app\extensions, come Kimbie Dark, Solarized Dark / Light o varianti di Monokai, ma non c'è un tema scuro predefinito.

Ma se dopo tutto c'è la possibilità di modificarlo, allora quali blocchi di codice sono responsabili del colore del membro dell'oggetto, del membro del puntatore e del nome della classe e della struttura nel linguaggio C ++?


4
Per chiunque venga qui: non è necessario cercare, modificare o creare file di temi. Tutto può essere modificato utilizzando workbench.colorCustomizationse editor.tokenColorCustomizationsnelle impostazioni utente: code.visualstudio.com/docs/getstarted/… .
chipit24

Si potrebbe anche resistere a uno stantio, ma si sta lavorando su una funzionalità che ci consentirebbe di aggiungere CSS globali personalizzati, come L' Atoms Edit -> Stylesheet...ultima modifica al problema è stata March github.com/Microsoft/vscode/issues/459 . È deludente che sia chiuso ai commenti. L'attuale API non consente a un'estensione di modificare CSS globale ... quindi dovremo aspettare o incollare manualmente CSS negli strumenti per sviluppatori come caveman.
Ray Foss

Risposte:


51

Il file che stai cercando si trova in,

Microsoft VS Code \ resources \ app \ extensions \ theme-defaults \ temi

su Windows e cerca il nome del file dark_vs.jsonper individuarlo su qualsiasi altro sistema.


Aggiornare:

Con le nuove versioni di VSCode non è necessario cercare il file delle impostazioni per personalizzare il tema. Ora puoi personalizzare il tema del colore con le impostazioni utente workbench.colorCustomizationse editor.tokenColorCustomizations. La documentazione sull'argomento può essere trovata qui .


13
Su Linux, è in/usr/share/code/resources/app/extensions/theme-defaults/themes
sigalor

1
Su Arch Linux, è (versione open source) in/usr/lib/code/extensions/theme-defaults/themes
hendalst

3
Per impostazione predefinita, VS Code è installato in C: \ utenti \ {nome utente} \ AppData \ Local \ Programmi \ Microsoft VS Code
Toivo Säwén

2
L'aggiornamento a questa risposta è una buona raccomandazione. Ho scoperto che se modifichi direttamente i file del tema, questi possono / saranno sovrascritti in un aggiornamento a VS Code.
cniggeler

75

In VS code 'Impostazioni utente', puoi modificare i colori visibili utilizzando i seguenti tag (questo è un esempio e ci sono molti più tag),

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

Se vuoi modificare alcuni token di colore C ++, usa il seguente tag,

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

1
Ma se va oltre tokenColorCustomizations, cosa devo fare?
Alex

Dove si può trovare un elenco di tutte le opzioni disponibili in "editor.tokenColorCustomizations"?
ololobus


La mia modifica è stata rifiutata per qualche motivo, ma per fare in modo che questa risposta risponda in modo specifico al desiderio dell'OP di cambiare un tema specifico, puoi specificare il tema e modificare i colori senza alterare i file del tema: "workbench.colorCustomizations": {"[Kimbie Dark]" : {"activityBar.foreground": "# 472c0c"}}
aamarks

Si chiama "Workbench: Color Customizations" nelle impostazioni
Zach Saucier

29

Per quanto riguarda i temi, VS Code è modificabile quanto Sublime. Puoi modificare uno qualsiasi dei temi predefiniti forniti con il codice VS. Devi solo sapere dove trovare i file del tema.

Nota a margine: adoro il tema Monokai. Tuttavia, tutto quello che volevo cambiare era lo sfondo. Non mi piace lo sfondo grigio scuro. Invece, penso che il contrasto sia MOLTO migliore con uno sfondo nero pieno. Il codice viene visualizzato molto di più.

Ad ogni modo, ho cercato il file del tema e l'ho trovato (in Windows) su:

c: \ Programmi (x86) \ Microsoft VS Code \ resources \ app \ extensions \ theme-monokai \ themes \

In quella cartella ho trovato il file Monokai.tmTheme e ho modificato la prima chiave di sfondo come segue:

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

Ci sono alcuni tasti "sfondo" nel file del tema, assicurati di modificare quello corretto. Quello che ho modificato era in cima. Riga 12 credo.


5
Le posizioni di installazione di Ubuntu sono come/usr/share/code/resources/app/extensions/theme-defaults/themes/dark_vs.json
Max

5
E per mac, ho scoperto che l'aggiornamento dei file in questi percorsi ha funzionato: /Users/user-name/.vscode/extensions/azemoh.one-monokai-0.3.3/themes/OneMonokai-color-theme.jsoncmd + shift + reload window
pe

1
La modifica dello sfondo del tema può essere eseguita anche da "workbench.colorCustomizations": { "[Theme You Want to Update]": { "editor.background": "#000000" }Nelle impostazioni utente.
Bilbo

1
Per il codice VS a 64 bit su Windows, il percorso di base è C:\Program Files\Microsoft VS Code\resources\app\extensions\ , solitamente seguito datheme-....
Peter B

Modificare il tema nelle impostazioni utente con "workbench.colorCustomizations": { "editor.background": "#000" },. Ecco tutte le diverse personalizzazioni che puoi fare: code.visualstudio.com/api/references/theme-color
Jeremy Moritz

17

Non puoi "modificare" un tema predefinito, sono "bloccati"

Tuttavia, puoi copiarlo nel tuo tema personalizzato, con le modifiche esatte che desideri.

Per maggiori informazioni, consulta questi articoli: https://code.visualstudio.com/Docs/customization/themes https://code.visualstudio.com/docs/extensions/install-extension#_your-extensions-folder

Se tutto ciò che vuoi cambiare sono i colori per il codice C ++, dovresti cercare di sovrascrivere il colorizzatore di supporto c ++. Per informazioni a riguardo, vai qui: https://code.visualstudio.com/docs/customization/colorizer

EDIT: il tema scuro si trova qui: https://github.com/Microsoft/vscode/tree/80f8000c10b4234c7b027dccfd627442623902d2/extensions/theme-colorful-defaults

EDIT2: Per chiarire:


1
E da dove posso copiarlo? Negli articoli che mi hai inviato non c'è niente al riguardo. E non voglio installare nulla per una cosa così banale come cambiare un po 'l'evidenziazione della sintassi, specialmente quando potrei semplicemente aprire il file giusto e modificare alcune righe di codice, se il tema predefinito non era bloccato. Inoltre, la generazione di un nuovo tema con Yeoman Generator richiede il file .tmTheme di un altro tema: non esiste un tema scuro di Visual Studio sul sito Web ColorSublime e non ho accesso a quello "bloccato" da VSC.
Toreno96

Forse potrei modificare il file c ++. Plist da "C: \ Programmi (x86) \ Microsoft VS Code \ resources \ app \ extensions \ cpp"? Ma quali blocchi di codice devo modificare? O forse c'è un file sorgente del tema scuro predefinito di VSC da qualche parte, che potrei usare per creare il mio tema personalizzato?
Toreno96

Non puoi modificarlo, perché credo che sia salvato all'interno del codice sorgente. Puoi comunque copiarlo / incollarlo e modificare un paio di righe. Si trova su GitHub. L'ho trovato per te: github.com/Microsoft/vscode/tree/… Risposta modificata con link
Tobiah Zarlez

È possibile modificare il file c ++. Plist che ho citato, l'ho controllato. E ho capito dall'articolo sui colorizzatori che si tratta di un file colorizer standard per il linguaggio C ++. Correggimi se sbaglio. Ma se stai ancora parlando di modificare il tema predefinito - sì, lo so che non posso farlo, ho capito la frase a riguardo dalla tua prima risposta. Grazie per le informazioni sul codice sorgente su GitHub e sul collegamento, ma ho controllato e i temi da lì non sono quelli predefiniti, ma modificati, variazioni più colorate di questi. Sfortunatamente, non in un modo che vorrei.
Toreno96

1
Ma per caso ho scoperto che il tema "Xcodedefault" dalla galleria di estensioni ha la stessa sintassi evidenziando quello scuro di default. Poiché ora è nella cartella delle estensioni sul mio disco, dopo l'installazione, posso modificarlo, proprio come volevo modificare il tema scuro predefinito. Quindi, il mio problema è risolto.
Toreno96

16

Il modo più semplice è modificare le impostazioni dell'utente e personalizzarle workbench.colorCustomizations

Modifica personalizzazioni colore

Se vuoi creare il tuo tema

C'è anche l'opzione modifica il tema corrente che copierà le impostazioni del tema corrente e ti permetterà di salvarlo come *.color-theme.jsonfile JSON5

Genera tema colore dalle impostazioni correnti


1
Hai voglia di riordinare la tua risposta in modo che la risposta migliore e più facile sia la prima? =]
Relequestual

14

Qualsiasi tema di colore può essere modificato in questa sezione delle impostazioni su VS Code versione 1.12 o successiva:

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

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

Valori disponibili per la modifica: https://code.visualstudio.com/docs/getstarted/theme-color-reference

EDIT: per cambiare i colori della sintassi, vedere qui: https://code.visualstudio.com/docs/extensions/themes-snippets-colorizers#_syntax-highlighting-colors e qui: https://www.sublimetext.com/docs/ 3 / scope_naming.html


Con ciò puoi sovrascrivere i colori dell'editor stesso ma non i colori di alcune parole chiave (es: stringhe color).
Jhegs

7

Come altri hanno affermato, dovrai sovrascrivere editor.tokenColorCustomizationsl' workbench.colorCustomizationsimpostazione o nel file settings.json. Qui puoi scegliere un tema di base, come Abyss, e sovrascrivere solo le cose che vuoi cambiare. Puoi sovrascrivere pochissime cose come la funzione, i colori delle stringhe ecc. Molto facilmente.

Ad esempio per workbench.colorCustomizations

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

Ad esempio per editor.tokenColorCustomizations :

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

Tuttavia, personalizzazioni profonde come cambiare il colore del var parola chiave richiedono di fornire i valori di sostituzione sotto la textMateRuleschiave.

Ad esempio sotto:

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

Puoi anche eseguire l'override globale tra i temi:

"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"
            }
        }
    ]
}

Maggiori dettagli qui: https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide


5

Soluzione per MAC OS

Non sono sicuro che questa risposta sia adatta qui, ma vorrei condividere una soluzione per gli utenti MAC e sembra imbarazzante se inizio una nuova domanda e rispondo da solo lì.


cerca il percorso del tuo tema VSCode come di seguito:

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

apri il file .json e cerca i tuoi stili mirati da modificare.
Nel mio caso, voglio cambiare il colore di rendering dello spazio bianco
e l'ho trovato
"editorWhitespace.foreground"
così sotto settings.jsonin Visual Studio Code,
ho aggiunto le seguenti righe (lo faccio in Impostazioni area di lavoro),

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

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


Non dimenticare di ⌘ Command+ Ssalvare le impostazioni per avere effetto.


2

I documenti ora hanno un'intera sezione su questo.

Fondamentalmente, usa npmper installare yoed esegui il comando yo codee otterrai un piccolo wizard basato su testo - una delle cui opzioni sarà creare e modificare una copia dello schema scuro predefinito.


2

Sono venuto qui per trovare un modo per modificare il tema, ma non sono riuscito a trovarlo sul mio Mac. Dopo un'immersione profonda, finalmente ho trovato il luogo di installazione:

~/.vscode/extensions

Tutte le estensioni lì dentro!

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.