web-dev-qa-db-fra.com

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

J'utilise Windows 7 64 bits.

Existe-t-il un moyen de modifier le thème sombre par défaut dans le code Visual Studio? Dans le dossier% USERPROFILE% .vscode, seuls les thèmes des extensions sont disponibles. Dans le chemin d’installation (j’utilisais par défaut, C:\Program Files (x86)\Microsoft Code), il existe des fichiers de certains thèmes standard dans\resources\app\extensions, comme Kimbie Dark, Solarized Dark/Light ou des variantes de Monokai, mais il n’existe pas de thème sombre par défaut.

Mais si après tout, il est possible de l'éditer, 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 dans le langage C++?

themesvisual-studio-code
62
Toreno96

Le fichier que vous recherchez est à,

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

sous Windows et recherchez le nom de fichier dark_vs.json pour le localiser sur un autre système.

20
paarandika

Dans le code VS "Paramètres utilisateur", vous pouvez modifier les couleurs visibles à l'aide des balises suivantes (il s'agit d'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 des jetons de couleur C++, utilisez la balise suivante,

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

En ce qui concerne les thèmes, VS Code est tout aussi éditable que Sublime. Vous pouvez éditer n'importe quel thème par défaut fourni avec le code VS. Vous devez juste savoir où trouver les fichiers de thème.

Note de côté: j'adore le thème Monokai. Cependant, tout ce que je voulais changer à ce sujet était le fond. 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 apparaît beaucoup plus.

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

c:\Program Files (x86)\Code Microsoft VS\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 de "fond" dans le fichier de thème, assurez-vous de modifier le bon. Celui que j'ai édité était tout en haut. Ligne 12 je pense.

26
iviouse

Vous ne pouvez pas "éditer" 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 souhaitées.

Pour plus d'informations, voir les articles suivants: https://code.visualstudio.com/Docs/customization/themeshttps://code.visualstudio.com/docs/extensions/install- extension # _votre-extensions-dossier

Si vous souhaitez uniquement modifier les couleurs du code C++, vous devez remplacer le coloriseur de prise en charge c ++. Pour plus d'informations à ce sujet, allez 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:

16
Tobiah Zarlez

Vous pouvez modifier n'importe quel thème de couleur dans cette section de paramètres de 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 modifier les couleurs de 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

13
needfulthing

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

Editing color customizations

Si vous voulez faire votre thème

Il existe également l'option de modifier le thème actuel, qui copie les paramètres du thème actuel et vous permet de l'enregistrer sous un fichier _*.color-theme.json_ JSON5.

Generate color theme from current settings

10
jay

Je ne suis pas sûr que cette réponse convienne ici, mais je voudrais partager une solution pour les utilisateurs de MAC et il est gênant si je commence une nouvelle question et y réponds moi-même.

[Solution pour MAC OS]
cherchez votre chemin de 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 que vous souhaitez cibler.
Pour mon cas, je veux changer la couleur de rendu des espaces
et je l'ai trouvé comme
"editorWhitespace.foreground"
donc sous settings.json dans 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 à partir de: https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme


N'oubliez pas de ⌘ Command+S enregistrer les paramètres pour prendre effet.

3
elliotching

Les docs ont maintenant une section entière à ce sujet.

Fondamentalement, utilisez npm pour installer yo, puis exécutez la commande yo code et vous obtiendrez un petit assistant textuel - dont l'une des options sera de créer et d'éditer une copie. du schéma sombre par défaut.

2
LeeGee

Comme d'autres l'ont déjà indiqué, vous devez remplacer le paramètre editor.tokenColorCustomizations ou workbench.colorCustomizations dans le fichier settings.json. Ici, vous pouvez choisir un thème de base, comme Abyss, et ne remplacer que 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, les personnalisations approfondies comme le changement de couleur du mot clé var nécessiteront que vous fournissiez les valeurs de substitution sous la clé textMateRules.

Par exemple. au dessous de:

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

Vous pouvez également remplacer globalement des 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

0
Varun Achar