Comment modifier le thème sombre par défaut pour Visual Studio Code?


88

J'utilise Windows 7 64 bits.

Existe-t-il un moyen de modifier le thème sombre par défaut dans Visual Studio Code? Dans le %USERPROFILE%\.vscodedossier, il n'y a que les thèmes des extensions, tandis que dans le chemin d'installation (j'ai utilisé par défaut,C:\Program Files (x86)\Microsoft VS Code ), il y a des fichiers de certains thèmes standard \resources\app\extensions, comme Kimbie Dark, Solarized Dark / Light ou des variantes de Monokai, mais il n'y a pas de thème sombre par défaut.

Mais si après tout il y a une possibilité de l'éditer, alors quels blocs de code sont responsables de la couleur du membre de l'objet, du membre du pointeur et du nom de la classe et de la structure en langage C ++?


4
Pour tous ceux qui viennent ici: vous n'avez pas besoin de rechercher et de modifier ou de créer des fichiers de thème. Tout peut être modifié en utilisant workbench.colorCustomizationset editor.tokenColorCustomizationsdans les paramètres utilisateur: code.visualstudio.com/docs/getstarted/… .
chipit24

On pourrait également tenir bon, mais en cours de travail sur une fonctionnalité qui nous permettrait d'ajouter du CSS global personnalisé, comme le Atoms Edit -> Stylesheet...dernier changement apporté au problème était March github.com/Microsoft/vscode/issues/459 . Il est décevant qu'il soit fermé aux commentaires. L'API actuelle ne permet pas à une extension de modifier le CSS global ... nous devrons donc attendre, ou coller manuellement le CSS dans les outils de développement comme l'homme des cavernes.
Ray Foss

Réponses:


47

Le fichier que vous recherchez se trouve à,

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

sur Windows et recherchez le nom dark_vs.jsonde fichier pour le localiser sur n'importe quel autre système.


Mise à jour:

Avec les nouvelles versions de VSCode, vous n'avez pas besoin de rechercher le fichier de paramètres pour personnaliser le thème. Vous pouvez désormais personnaliser votre thème de couleurs avec les paramètres utilisateur workbench.colorCustomizationset editor.tokenColorCustomizations. La documentation à ce sujet est disponible ici .


11
Sous Linux, c'est dans/usr/share/code/resources/app/extensions/theme-defaults/themes
sigalor

1
Sur Arch Linux, c'est (version open-source) dans/usr/lib/code/extensions/theme-defaults/themes
hendalst

3
Par défaut, VS Code est installé dans C: \ users \ {username} \ AppData \ Local \ Programs \ Microsoft VS Code
Toivo Säwén

2
La mise à jour de cette réponse est une bonne recommandation. J'ai trouvé que si vous modifiez directement les fichiers de thème, ils peuvent / seront écrasés lors d'une mise à jour de VS Code.
cniggeler le

73

Dans le code VS `` Paramètres utilisateur '', vous pouvez modifier les couleurs visibles à l'aide des balises suivantes (ceci est un exemple et il y a beaucoup plus de balises),

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

Si vous souhaitez modifier certains jetons de couleur C ++, utilisez la balise suivante,

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

1
Mais si c'est au-delà de tokenColorCustomizations, que dois-je faire?
Alex

Où peut-on trouver une liste de toutes les options disponibles dans "editor.tokenColorCustomizations"?
ololobus

2
Oh, je l' ai
ololobus

Ma modification a été rejetée pour une raison quelconque, mais pour que cette réponse réponde spécifiquement au désir de l'OP de changer un thème spécifique, vous pouvez spécifier le thème et modifier les couleurs sans modifier les fichiers du thème: "workbench.colorCustomizations": {"[Kimbie Dark]" : {"activityBar.foreground": "# 472c0c"}}
aamarks

Ça s'appelle "Workbench: Color Customizations" dans les paramètres
Zach Saucier

29

En ce qui concerne les thèmes, VS Code est tout aussi modifiable que Sublime. Vous pouvez modifier l'un des thèmes par défaut fournis avec le code VS. Il vous suffit de savoir où trouver les fichiers de thème.

Note latérale: j'adore le thème Monokai. Cependant, tout ce que je voulais changer à ce sujet était l'arrière-plan. Je n'aime pas le fond grisâtre foncé. Au lieu de cela, je pense que le contraste est bien meilleur avec un fond noir uni. Le code ressort beaucoup plus.

Quoi qu'il en soit, j'ai cherché le fichier de thème et l'ai trouvé (dans Windows) à:

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

Dans ce dossier, j'ai trouvé le fichier Monokai.tmTheme et modifié la première clé d'arrière-plan comme suit:

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

Il y a quelques clés «d'arrière-plan» dans le fichier de thème, assurez-vous de modifier la bonne. Celui que j'ai édité était tout en haut. Ligne 12 je pense.


5
Les emplacements d'installation d'Ubuntu sont comme/usr/share/code/resources/app/extensions/theme-defaults/themes/dark_vs.json
Max

5
Et pour mac, j'ai trouvé que la mise à jour des fichiers dans ces chemins fonctionnait: /Users/user-name/.vscode/extensions/azemoh.one-monokai-0.3.3/themes/OneMonokai-color-theme.jsoncmd + shift + p et tapez reload windowcmd pour essayer immédiatement le changement :)
balajikris

1
La modification de l'arrière-plan du thème peut également être effectuée "workbench.colorCustomizations": { "[Theme You Want to Update]": { "editor.background": "#000000" }dans les paramètres utilisateur.
Bilbo

1
Pour le code VS 64 bits sous Windows, le chemin de base est C:\Program Files\Microsoft VS Code\resources\app\extensions\ généralement suivi detheme-....
Peter B

Modifiez le thème dans les paramètres utilisateur avec "workbench.colorCustomizations": { "editor.background": "#000" },. Voici les différentes personnalisations que vous pouvez faire: code.visualstudio.com/api/references/theme-color
Jeremy Moritz

17

Vous ne pouvez pas "modifier" un thème par défaut, ils sont "verrouillés"

Cependant, vous pouvez le copier dans votre propre thème personnalisé, avec les modifications exactes que vous souhaitez.

Pour plus d'informations, consultez ces articles: https://code.visualstudio.com/Docs/customization/themes https://code.visualstudio.com/docs/extensions/install-extension#_your-extensions-folder

Si vous ne souhaitez modifier que les couleurs du code C ++, vous devez envisager de remplacer le coloriseur de support C ++. Pour plus d'informations à ce sujet, rendez-vous ici: https://code.visualstudio.com/docs/customization/colorizer

EDIT: Le thème sombre se trouve ici: https://github.com/Microsoft/vscode/tree/80f8000c10b4234c7b027dccfd627442623902d2/extensions/theme-colorful-defaults

EDIT2: Pour clarifier:


1
Et d'où puis-je le copier? Dans les articles que vous m'avez envoyés, il n'y a rien à ce sujet. Et je ne veux rien installer pour une chose aussi banale comme changer un peu la syntaxe en surbrillance - surtout quand je pourrais simplement ouvrir le bon fichier et modifier quelques lignes de code, si le thème par défaut n'était pas verrouillé. De plus, la génération d'un nouveau thème avec Yeoman Generator nécessite le fichier .tmTheme d'un autre thème - il n'y a pas de thème sombre Visual Studio sur le site Web ColorSublime et je n'ai pas accès au "verrouillé" de VSC.
Toreno96

Peut-être que je pourrais modifier le fichier c ++. Plist à partir de "C: \ Program Files (x86) \ Microsoft VS Code \ resources \ app \ extensions \ cpp"? Mais quels blocs de code dois-je changer? Ou peut-être qu'il existe quelque part un fichier source du thème sombre par défaut de VSC, que je pourrais utiliser pour créer mon propre thème personnalisé?
Toreno96

Vous ne pouvez pas le modifier, car je pense qu'il est enregistré dans le code source. Vous pouvez cependant le copier / coller et modifier quelques lignes. Il est situé sur le GitHub. Je l'ai trouvé pour vous: github.com/Microsoft/vscode/tree / ... Réponse modifiée avec lien
Tobiah Zarlez

Il est possible d'éditer le fichier c ++ .plist que je mentionne, j'ai vérifié cela. Et j'ai compris de l'article sur les colorisateurs qu'il s'agit d'un fichier de coloriseur standard pour le langage C ++. Corrige moi si je me trompe. Mais si vous parlez encore de l'édition du thème par défaut - oui, je sais que je ne peux pas faire cela, j'ai compris la phrase à ce sujet dès votre première réponse. Merci pour les informations sur le code source sur GitHub et le lien - mais j'ai vérifié et les thèmes de là ne sont pas ceux par défaut, mais une variation modifiée et plus colorée de ceux-ci. Malheureusement, pas d'une manière que je voudrais.
Toreno96

1
Mais par accident, j'ai découvert que le thème "Xcodedefault" de la galerie d'extensions avait la même syntaxe mettant en évidence que le thème sombre par défaut. Comme il se trouve dans le dossier d'extension de mon disque maintenant, après l'installation, je peux le modifier, tout comme je voulais modifier le thème sombre par défaut. Donc, mon problème est résolu.
Toreno96

15

Le moyen le plus simple consiste à modifier les paramètres utilisateur et à personnaliser workbench.colorCustomizations

Modification des personnalisations de couleur

Si vous souhaitez créer votre thème

Il existe également la possibilité de modifier le thème actuel qui copiera les paramètres actuels du thème et vous permettra de l'enregistrer en tant que *.color-theme.jsonfichier JSON5

Générer un thème de couleur à partir des paramètres actuels


1
Envie de réorganiser votre réponse pour que la réponse la meilleure et la plus simple soit la première? =]
Relequestual

14

Tout thème de couleur peut être modifié dans cette section de paramètres sur VS Code version 1.12 ou supérieure:

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

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

Valeurs disponibles à modifier: https://code.visualstudio.com/docs/getstarted/theme-color-reference

EDIT: Pour changer les couleurs de la syntaxe, voir ici: https://code.visualstudio.com/docs/extensions/themes-snippets-colorizers#_syntax-highlighting-colors et ici: https://www.sublimetext.com/docs/ 3 / scope_naming.html


Avec cela, vous pouvez remplacer les couleurs de l'éditeur lui-même mais pas les couleurs de certains mots-clés (ex: couleur des chaînes).
Jhegs

7

Comme d'autres l'ont indiqué, vous devrez remplacer editor.tokenColorCustomizationsle workbench.colorCustomizationsparamètre ou dans le fichier settings.json. Ici, vous pouvez choisir un thème de base, comme Abyss, et remplacer uniquement les éléments que vous souhaitez modifier. Vous pouvez soit remplacer très peu de choses comme la fonction, les couleurs de chaîne, etc. très facilement.

Par exemple pour workbench.colorCustomizations

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

Par exemple pour editor.tokenColorCustomizations:

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

Cependant, des personnalisations profondes telles que le changement de couleur du varmot - clé vous obligeront à fournir les valeurs de remplacement sous la textMateRulesclé.

Par exemple ci-dessous:

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

Vous pouvez également remplacer globalement les thèmes:

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

Plus de détails ici: https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide


5

Solution pour MAC OS

Je ne sais pas si cette réponse convient ici, mais j'aimerais partager une solution pour les utilisateurs de MAC et cela semble gênant si je commence une nouvelle question et y réponds.


recherchez le chemin de votre thème VSCode comme ci-dessous:

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

ouvrez le fichier .json et recherchez les styles ciblés à modifier.
Dans mon cas, je souhaite modifier la couleur de rendu des espaces blancs
et je l'ai trouvée comme
"editorWhitespace.foreground"
telle settings.jsondans Visual Studio Code,
j'ai ajouté les lignes suivantes (je le fais dans les paramètres de l'espace de travail),

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

Solutions guidées depuis: https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme


N'oubliez pas de ⌘ Command+ Senregistrer les paramètres pour qu'ils prennent effet.


2

La documentation a maintenant une section entière à ce sujet.

Fondamentalement, utilisez npmpour installer yoet exécuter la commande yo codeet vous obtiendrez un petit assistant basé sur du texte - dont l'une des options sera de créer et de modifier une copie du schéma sombre par défaut.


1

Je suis venu ici pour trouver un moyen de modifier le thème, mais je n'ai pas pu le trouver sur mon Mac. Après une plongée approfondie, j'ai finalement trouvé le lieu d'installation:

~/.vscode/extensions

Toutes les extensions là-dedans!


cette réponse est bonne, elle a été injustement rejetée.
Polymerase
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.