web-dev-qa-db-fra.com

Comment ajouter un thème dans Visual Studio Code?

J'ai récemment téléchargé le éditeur de code VS qui est vraiment sympa. mais le seul problème que j'y trouve est le thème de couleur, je suis habitué au thème de couleur monokai comme dans le texte sublime et je ne peux pas trouver un moyen de modifier le thème de couleur ou de télécharger un thème de couleur, il n'y a que 2 options:

  1. Thème sombre
  2. Thème léger

Comment puis-je ajouter mon propre thème ou dupliquer un thème existant pour pouvoir modifier le schéma de couleurs comme je le souhaite?

Je parviens à changer certaines des couleurs dans le fichier suivant mais je ne sais toujours pas comment ajouter un thème complètement nouveau:

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

Il semble que les thèmes de couleurs seront bientôt disponibles et feront partie d'un système de plugins

code-studio-visuel/suggestions/7756227-thème

color-schemevisual-studio-code
34
talsibony

Code Visual Studio 0.9.0 et versions ultérieures

Il existe une documentation officielle sur la façon d'ajouter un thème personnalisé: https://github.com/Microsoft/vscode-docs/blob/0.9.0/release-notes/latest.md

Tu as besoin d'un .tmtheme fichier pour le thème que vous souhaitez ajouter. Vous pouvez trouver des fichiers existants, par exemple sur GitHub, ColorSublime ou vous pouvez définir votre propre fichier de thème (par exemple avec https://github.com/aziz/tmTheme-Editor ).

Après avoir trouvé un .tmtheme fichier, vous avez deux façons de créer une extension à partir de celle-ci.

Option 1: utilisation d'un générateur Yeoman

  • Installez node.js (si vous ne l'avez pas déjà fait)
  • Installez yo (si vous ne l'avez pas déjà fait) en exécutant npm install -g yo
  • Installez le générateur Yo pour le code: npm install -g generator-code
  • Courir yo code et sélectionnez New Color Theme
  • Suivez les instructions (définissez le .tmTheme fichier, nom du thème, thème de l'interface utilisateur, etc.)
  • Le générateur crée un répertoire pour votre extension avec le nom du thème dans votre répertoire de travail actuel.

Option 2: Créez le répertoire par vous-même

  • Créez un répertoire avec le nom de votre plugin (uniquement des lettres minuscules). Disons que nous l'appelons mytheme.
  • Ajoutez un sous-dossier themes et placez le .tmTheme fichier à l'intérieur

  • Créez un fichier package.json à l'intérieur de la racine du dossier d'extension avec un contenu comme celui-ci

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

Enfin, ajoutez votre extension au code Visual Studio

Copiez le dossier d'extension dans le répertoire d'extension. C'est:

  • sur Windows %USERPROFILE%\.vscode\extensions

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

Redémarrez VSCode et sélectionnez le nouveau thème dans File -> Preferences -> Color Theme

Code Visual Studio 0.8.0

Il est possible d'ajouter de nouveaux thèmes dans Visual Studio Code 0.8.0 (publié pour les initiés le 31/08/2015 [devenir un initié: https://www.instant.ly/s/Y5nt1/nav#p/ 186a0] ).

Après avoir installé VSCode 0.8.0 ou supérieur, procédez comme suit pour appliquer votre propre thème:

  1. Téléchargez un .tmTheme fichier ou créez le vôtre (par exemple avec https://github.com/aziz/tmTheme-Editor )
  2. Copiez le .tmTheme fichier vers %CODEFOLDER%/resources/app/plugins/vs.theme.starterkit/themes

  3. Enregistrez le .tmTheme fichier dans %CODEFOLDER%/resources/app/plugins/vs.theme.starterkit/ticino.plugin.json en y ajoutant une entrée comme celle-ci:

    {
    "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. Redémarrez VSCode et sélectionnez le nouveau thème dans File -> Preferences -> Color Theme

47
Wosi

L'ajout d'un thème complètement nouveau n'est actuellement pas pris en charge. Vous pouvez soumettre vos demandes de fonctionnalités ici, j'ai déjà entendu des gens le demander https://visualstudio.uservoice.com/forums/293070-visual-studio-code

12
Isidor Nikolic

J'ai trouvé que le fichier - resources/app/client/vs/monaco/ui/workbench/native/native.main.css - est également le bon endroit pour changer la façon dont les polices sont rendues. J'essayais de comprendre comment désactiver le lissage des polices sur OS X et j'ai constaté que vous pouvez le faire ici en ajoutant cette règle CSS dans le fichier -

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