Share
Ce que vous allez créerAtom, le nouvel éditeur de code publié par GitHub, fait partie des nouvelles applications qui permettent aux technologies Web telles que LESS, JavaScript et HTML de s'exécuter de manière native dans un environnement de bureau. Atom s’installe et fonctionne comme une application de bureau "classique", mais une fois ouvert, il se comporte de manière à ce que tout développeur Web le connaisse..
Atom est une "variante spécialisée de Chromium" et lorsqu'il est exécuté en mode développeur, il permet d'accéder aux mêmes "outils de développement" auxquels vous êtes peut-être habitué depuis Chrome. Ainsi, comme avec n'importe quelle application Web en ligne, vous pouvez inspecter le code derrière n'importe quel élément de l'interface de l'application et voir ce qui le motive:
Cela signifie concrètement que toute personne expérimentée en conception et développement Web sera immédiatement familiarisée avec le fonctionnement d'Atom et sera probablement beaucoup plus à l'aise pour créer des modifications et des ajustements qu'avec des programmes comparables. Le style visuel d'Atom est basé sur CSS, généré à partir de LESS. Vous pouvez donc modifier son apparence de la même manière que n'importe quel site Web alimenté par MOINS..
Atom a deux types de "thèmes" responsables de son style de présentation:
Thèmes de syntaxe tout contrôler dans l'espace intérieur de l'éditeur, à savoir la gouttière, les numéros de ligne et la zone de code.
Thèmes de l'interface contrôler tout le reste, c'est-à-dire les onglets, la barre latérale, les boutons, les incrustations, les messages, etc..
Dans ce didacticiel, vous apprendrez à créer ces deux types de thèmes et à les produire en tandem afin que l'interface entière soit uniformément restylée. Commençons!
Pour le moment, Atom est uniquement Mac, et pendant sa phase bêta, l'accès se fait par invitation. Si vous n'avez pas encore d'invitation, je vous suggère de faire une demande sur Twitter ou sur le forum Atom. Quelqu'un est tenu de vous en envoyer une. Téléchargez et installez-le comme n'importe quelle autre application.
Le développement de thèmes impliquera une utilisation de la ligne de commande spécifique à Atom. La première chose à faire est donc d’installer les packages qui activent ces commandes. Après avoir exécuté Atom pour la première fois, allez à et sélectionnez Atom> Installer les commandes shell, qui installe le atome et apm (gestionnaire de paquets atom) commandes.
Je suggère également d'utiliser une application qui vous permettra d'ouvrir un terminal à partir de n'importe quel dossier affiché dans le Finder, car cela facilitera l'exécution des commandes au bon endroit. Personnellement, j'utilise gratuitement XtraFinder pour ajouter une option "Nouveau terminal ici" au menu contextuel de mon Finder.
Le processus de base pour créer un nouveau thème d'interface utilisateur Atom consiste à insérer l'un des deux thèmes par défaut disponibles dans GitHub, à lui attribuer un nom et à modifier les fichiers inclus..
Pour ce faire, commencez par vous assurer que vous avez à la fois un compte sur GitHub et que GitHub pour Mac (à moins que vous ne préfériez utiliser la ligne de commande) est installé. Puis dirigez-vous vers le référentiel pour le thème Atom Dark UI ou le thème Atom Light UI. Dans ce tutoriel, nous utiliserons une palette de couleurs sombres, nous allons donc bifurquer le thème par défaut sombre.
Dans le coin supérieur droit du référentiel d'interface utilisateur d'origine, cliquez sur le bouton "Fork":
Cela créera une copie du rapport sous votre propre compte, c.-à-d.. votre compte / atome-dark-ui. La prochaine chose à faire est de donner votre propre nom au référentiel. Dans la barre latérale droite de votre référentiel forké, cliquez sur l'élément de menu "Paramètres"..
En haut de la page "Paramètres", vous verrez un champ pour le nom du référentiel. Tapez un nouveau nom de votre choix, (dans mon cas "nuance-dark-ui)", dans ce champ en veillant à conserver le "-ui" à la fin, puis cliquez sur "Renommer":
Vous êtes maintenant prêt à télécharger votre thème dans votre environnement hors ligne afin de pouvoir commencer à le modifier. Pour ce faire, retournez à la page principale de votre référentiel puis recherchez et cliquez sur le bouton "Cloner dans le bureau" dans la barre latérale:
"GitHub pour Mac"téléchargera ensuite le référentiel pour vous dans votre emplacement GitHub par défaut. Dans votre liste de référentiels dans "GitHub pour Mac", cliquez avec le bouton droit de la souris sur le thème de l'interface utilisateur nouvellement cloné et sélectionnez "Afficher dans le Finder":
Une fenêtre du Finder s'ouvrira montrant votre dossier de thème d'interface utilisateur à l'intérieur de votre dossier GitHub. Double-cliquez dessus pour aller dans le dossier actuel et voir le contenu dans.
Ouvrez un nouveau terminal à cet endroit puis exécutez la commande atome --dev
Cette commande ouvrira Atom en mode développeur, affichant la structure de fichiers et de dossiers de votre thème dans la barre latérale. Dans cette barre latérale, cliquez sur le fichier "package.json" pour l'ouvrir, puis modifiez le nom, le numéro de version et la description. Encore une fois, assurez-vous de conserver le "-ui" à la fin du nom du thème, puis enregistrez:
Enfin, vous devez indiquer à Atom comment accéder à votre dossier de thèmes à partir de son dossier GitHub local. Revenez à votre terminal, qui devrait toujours être dans le dossier de votre thème, et exécutez la commande lien apm
Maintenant, retournez à Atom et appuyez sur cmd-alt-ctrl-L ou sélectionnez Voir> Recharger depuis le menu du haut pour recharger l'interface, ce qui actualisera la liste des thèmes d'interface utilisateur disponibles, permettant ainsi de sélectionner le vôtre.
Dans le menu du haut, sélectionnez Atome> Paramètrespour ouvrir la page des paramètres et cliquez sur "Thèmes" dans la barre latérale gauche du panneau. Vous devriez voir votre thème dans la liste intitulée "Thèmes de l'interface utilisateur", alors allez-y et sélectionnez-le:
Votre nouveau thème d'interface utilisateur est maintenant actif et prêt à être modifié. Cependant, avant de poursuivre, nous allons également générer un thème de syntaxe afin que vous puissiez modifier les deux en même temps, en gardant un œil sur leur fonctionnement ensemble..
La création d'un nouveau thème de syntaxe est un processus plus facile que pour un thème d'interface utilisateur..
Dans Atom, appuyez sur cmd-shift-P pour afficher la palette de commandes, puis tapez "Générer un thème de syntaxe". Quand tu vois Générateur de paquet: Générer un thème de syntaxe apparaissent cliquez dessus pour exécuter la commande:
Une fenêtre apparaît dans laquelle vous pouvez entrer le chemin et le nom de votre thème de syntaxe. Quoi que vous décidiez de nommer votre thème, il devrait se terminer par "-syntax". Étant donné que mon thème d'interface utilisateur s'appelait "nuance-dark-ui", j'ai nommé mon thème de syntaxe "nuance-dark-syntax"..
Après avoir entré votre chemin et votre nom de thème, appuyez sur Entrer procéder.
Atom générera un nouveau thème de syntaxe pour vous et l'ouvrira dans la barre latérale. Vous devriez maintenant pouvoir aller à Atome> Paramètres à nouveau et choisissez votre nouveau thème de syntaxe à côté de la Thème de syntaxe étiquette:
Comme nous allons travailler ensemble sur les thèmes de l'interface utilisateur et de la syntaxe, nous voulons pouvoir accéder à leurs deux fichiers à partir de la barre latérale. Nous souhaitons également être en "mode développement" pendant la modification de ces fichiers, ce qui signifie qu'Atom actualisera automatiquement son apparence à chaque fois que nous sauvegardons nos modifications..
Suivez ces étapes pour ouvrir les deux thèmes en mode dev, et utilisez ce même processus à tout moment dans le futur pour revenir et éditer vos thèmes..
Aller à Atome> Préférences ouvrir la page des paramètres.
Cliquez sur ˜ / .atom ouvert au bas de la barre latérale de gauche des paramètres pour ouvrir votre dossier Atom local dans la barre latérale Atom:
Dans la barre latérale Atom, cliquez avec le bouton droit de la souris sur le thème de votre syntaxe ou sur le dossier du thème de l'interface utilisateur, puis choisissez Afficher dans le Finder:
Quittez Atom pour fermer l’instance existante (elle n’est pas en mode dev, nous n’en avons donc pas besoin), puis dans la fenêtre du Finder affichant vos dossiers de thèmes, ouvrez un nouveau terminal:
Lancer la commande atome --dev pour ouvrir le dossier dans Atom en mode dev. Vous devriez maintenant voir les deux dossiers de thèmes dans la barre latérale:
Comme nous sommes en mode dev, nous pouvons maintenant ouvrir n’importe quel fichier de thème à partir de la barre latérale et les modifications deviendront automatiquement visibles dans l’interface Atom..
Nous sommes maintenant prêts à commencer le processus de conception!
Vous aurez peut-être besoin d'un peu de peaufinage pour obtenir les couleurs de votre thème exactement comme vous le souhaitez. La conception directement dans le code n'est donc probablement pas l'approche la plus efficace..
Dans les fichiers source joints à ce didacticiel, vous trouverez un fichier PSD nommé "colormockup.psd", qui contient suffisamment d'éléments d'interface et de simulations de code pour faciliter votre sélection de palette de couleurs. Utilisez ce fichier PSD pour visualiser les couleurs que vous souhaitez utiliser dans votre interface utilisateur et dans les thèmes de syntaxe..
Personnellement, j'aime les couleurs terreuses, la faible lumière et le faible contraste qui ne me brûlent pas les yeux, alors je me suis retrouvé avec ceci
C’est ma préférence personnelle, mais vous pouvez bien sûr choisir un style qui vous convient..
Lorsque votre maquette est terminée, vous êtes prêt à transférer vos valeurs de couleur dans le code MOINS de vos thèmes. Nous allons commencer par le thème de la syntaxe car il est plus simple et utilise moins de variables que le thème de l'interface utilisateur..
Dans la barre latérale Atom, développez le dossier de votre thème de syntaxe et ouvrez-le. feuilles de style> colors.less. Vous devriez voir ceci:
Si vous modifiez la valeur de l'une de ces variables, puis enregistrez le fichier, vous devriez voir instantanément la mise à jour de la zone de syntaxe. Par exemple, si vous modifiez la valeur de @gris foncé à # F00 vous devriez voir le fond de la gouttière changer de couleur:
MMM bienLes couleurs répertoriées dans ce fichier sont à leur tour associées à divers aspects de la syntaxe via les fichiers "syntax-variables.less" et "base.less". Ouvrez ces fichiers et prenez un moment pour les parcourir rapidement. Dans le fichier "syntax-variables.less", vous verrez des variables extraites du fichier "colors.less". Cependant, dans le fichier "base.less", vous verrez les variables des fichiers "colors.less" et "syntax-variables.less".
À mesure que nous ajoutons notre nouveau jeu de couleurs à ce thème, nous allons modifier la valeur des variables dans "colors.less" de manière à ce que leurs noms ne reflètent plus nécessairement la couleur qu'elles contiennent. Par exemple, où la variable @violet a été utilisé, nous utiliserons plutôt une nuance de vert.
Pour être minutieux, vous devriez idéalement créer de nouveaux noms de variables qui reflètent le nouveau schéma de couleurs. Toutefois, pour les besoins de ce didacticiel, je ne veux pas vous obliger à remplacer toutes les occurrences des anciens noms de variables par la syntaxe " variables.less "et" base.less ".
Ainsi, même si cela peut sembler un peu étrange, nous allons simplement allouer les couleurs de notre nouveau schéma directement aux noms de variables existants dans "colors.less". De cette façon, il vous suffit de modifier un seul fichier pour créer votre thème de syntaxe..
Pour vous aider à comprendre quelles variables influencent quels aspects du jeu de couleurs, remplacez le code complet du fichier "colors.less" par ceci:
// Ces couleurs sont spécifiques au thème. Ne pas utiliser dans un paquet! // Texte brut et numéros de ligne @ gris très pâle: # c5c8c6; // Commentaires @ light-grey: # 969896; // Ligne en surbrillance @gray: # 373b41; // Fond de gouttière @ gris foncé: # 282a2e; // Arrière-plan de la zone de code @ gris très foncé: # 1d1f21; @cyan: # 8abeb7; @blue: # 81a2be; @purple: # b294bb; @vert: # b5bd68; @red: # cc6666; @orange: # de935f; @ orange clair: # f0c674;
Les commentaires ajoutés à la première section vous indiquent où chacune des variables de couleur "grises" est utilisée dans la zone de syntaxe..
La deuxième section avec les sept variables de couleur est un peu plus compliquée car chacune d’elles affecte un type de code différent. Pour avoir une idée de la façon dont ces variables apparaîtront, créez un nouveau fichier PHP et collez-le dans ceci:
Accentsconagua
assombrir (@red, 10%) / * Commentaires> @ gris clair * / // fonction = .storage> @purple // nom_fonction = .entité.nom.fonction> @blue fonction fonction_nom () // return =. keyword.control> @purple // array = .support.function> @cyan // string = .string> @green return array ('string' => 'string'); // $ = .punctuation.definition.variable> @ very-light-grey // nom_var = = variable> @red // new = .keyword> @purple // SUPPORT_CLASS = .support.class> @ orange pâle / / true = .constant> @orange $ var_name = new SUPPORT_CLASS (true); ?> Remarque: ce fichier est également inclus dans les fichiers source.
Lorsque vous affichez le code ci-dessus dans Atom, vous verrez des exemples de l'apparence de chacune des sept variables de couleur appliquée à la syntaxe. Le même code est utilisé dans "colormockup.psd" fourni pour vous permettre de voir comment les couleurs se corrèlent.
Consultez les commentaires inclus pour une description des variables de couleur associées à chaque élément du code. Vous pouvez utiliser ce code avec le PSD pour vous aider à déterminer les variables vers lesquelles les couleurs que vous avez choisies doivent être mappées dans votre fichier "colors.less"..
Nous allons commencer par transférer les couleurs "grises" de votre maquette PSD.
La première variable listée dans "colors.less" est @ gris très clair que nous connaissons (d'après les commentaires que vous venez d'ajouter), est utilisé dans "Numéros de texte et de lignes en clair". Allez sur votre PSD et copiez le code hexadécimal de la couleur que vous avez choisie pour vos numéros de ligne. Collez cette valeur, qui dans ce cas est # 9b836a, dans "colors.less" pour remplacer la valeur par défaut pour @ gris très clair.
Ensuite, récupérez l'hexcode de couleur que vous avez choisi pour le commentaire et ajoutez-le à la variable @gris clair. Continuez ainsi jusqu'à ce que les cinq variables "grises" soient mises à jour. Pour le thème "nuance-dark-syntax" j'ai utilisé:
// Texte brut et numéros de ligne @ gris très pâle: # 9b836a; // Commentaires @ gris clair: # 624e3b; // Ligne en surbrillance @gray: # 352b22; // Fond de gouttière @ gris foncé: # 28211a; // Arrière-plan de la zone de code @ gris très foncé: # 1f1913;
Enregistrez le fichier "colors.less" et vous devriez immédiatement voir votre zone de syntaxe sembler très différente:
Passons maintenant aux sept variables de couleur de la deuxième section..
La première de ces variables est @cyan, et le contenu du fichier PHP que nous avons créé précédemment contient le commentaire array = .support.function> @cyan, en nous disant que cette couleur est utilisée sur le mot "array". Allez sur votre PSD et copiez le code hexadécimal que vous avez appliqué au mot "array". Dans le thème "nuance" c'était # 446675.
Répétez le même processus de recherche de chaque nom de variable dans les commentaires de votre fichier PHP pour voir à quel type de code il s'applique, puis copiez la couleur que vous avez choisie dans votre PSD..
Pour le thème "nuance" j'ai utilisé:
@cyan: # 446675; @blue: # 40796b; @purple: # 6a7c02; @ green: # 93a14a; @red: # a55027; @orange: # a56b32; @ orange clair: # b5a163;
Une fois la sauvegarde effectuée, examinez à nouveau votre fichier PHP et vous devriez voir toutes vos nouvelles couleurs s’y refléter, correspondant à votre PSD:
Votre thème de syntaxe est maintenant complet! Il est maintenant temps de passer au thème de l'interface utilisateur.
Ajouter votre jeu de couleurs dans le thème de l'interface utilisateur est un peu plus compliqué que le thème de la syntaxe car il utilise beaucoup plus de variables. De plus, toutes les couleurs du thème par défaut ne sont pas définies en tant que variables. Dans certains cas, vous devrez donc modifier les styles actuels..
La plupart des couleurs utilisées dans le thème de l'interface utilisateur sont définies dans le fichier "ui-variables.less". Allez-y et développez votre dossier de thèmes de syntaxe et ouvrez le fichier pour le modifier à partir du dossier "stylesheets".
Atom est livré avec un "Guide de style" très utile qui vous donne un aperçu de tous les éléments de l'interface utilisateur influencés par votre thème. Ouvrez-le en allant à Forfaits> Guide de style> Show.
Dans la plupart des cas, les noms de variables du fichier "ui-variables.less" sont descriptifs et à corréler, dans l'ordre, avec les éléments d'interface utilisateur répertoriés dans le guide de style. Par exemple, les premières variables sont préfixées @ couleur du texte et corréler avec la première section du Styleguide, intitulée "classes de texte".
Si vous ne savez pas quelle variable affectera quoi, n'ayez pas peur de changer les variables de manière aléatoire pour voir quels aspects du guide de style sont modifiés.
Toutes les couleurs du thème d'interface utilisateur par défaut n'ont pas de variables LESS associées dans le fichier "ui-variables.less". Certaines couleurs sont codées directement dans d'autres fichiers LESS dans le thème.
Si vous ne savez pas d'où provient une couleur d'interface utilisateur et qu'elle ne semble pas avoir de variable associée, utilisez l'inspecteur d'éléments de la zone en question pour trouver le nom de la classe responsable de la couleur. Puis lancez une recherche dans le Finder pour trouver le nom de cette classe afin d’essayer de déterminer lequel des fichiers LESS du thème contient la classe..
Par exemple, la barre latérale a un code couleur hexagonal de # 303030 dans le thème par défaut qui n’est défini nulle part dans "ui-variables.less". L'inspection de l'élément montre que l'hexcode provient de la classe .panneau focalisable.
L'exécution d'une recherche dans le dossier de l'interface utilisateur dans "focusable-panel" dans l'interface utilisateur révèle que cette classe est contenue dans le fichier "tree-view.less".
Le fichier peut ensuite être édité, en plaçant une variable du fichier "ui-variables.less" à la place d'une valeur hexadécimale codée en dur.
Parfois, votre recherche ne donnera aucun résultat, quelle qu'en soit la raison, et vous devrez peut-être faire les choses à la dure et parcourir manuellement chaque fichier de thème d'interface utilisateur jusqu'à ce que vous trouviez la classe que vous souhaitez modifier..
Le thème de l'interface utilisateur ne peut pas accéder aux variables de couleur définies par le thème de syntaxe. Toutefois, nous souhaitons utiliser les mêmes couleurs pour les deux thèmes afin qu'elles correspondent. En tant que tel, nous devrons dupliquer les variables de couleur de notre thème de syntaxe dans notre thème d'interface utilisateur..
En haut du thème "ui-variables.less", collez toutes les variables de votre thème de syntaxe:
@ gris très clair: # 9b836a; @ gris clair: # 624e3b; @gray: # 352b22; @ gris foncé: # 28211a; @ gris très foncé: # 1f1913; @cyan: # 446675; @blue: # 40796b; @purple: # 6a7c02; @ green: # 93a14a; @red: # a55027; @orange: # a56b32; @ orange clair: # b5a163;
En plus de ces variables, cinq autres variables personnalisées que j'ai définies afin de transférer toutes les couleurs de ma maquette sont également collées au sommet du fichier "ui-variables.less":
// BG du fichier sélectionné dans la barre latérale @n_selected: # 2b231b; // BG de la barre latérale @n_defaultbg: # 241d17; // BG de la barre d'outils inférieure et panneau "Rechercher" @n_darkerbg: # 191613; // Couleur du texte sélectionné dans la barre latérale @n_highlight: # a37748; // Couleur de la bordure des onglets @n_tabborder: # 372d26;
Ces variables seront utilisées à plusieurs endroits, mais les commentaires inclus vous donnent un exemple d'utilisation, ce qui vous aidera à déterminer les codes de couleur à copier de votre PSD. En outre, dans la mesure du possible, les couches de la DSP ont été nommées en référence à la variable qu’elles affectent..
Comme je l'ai mentionné ci-dessus, certaines valeurs de couleur du thème par défaut sont codées en dur plutôt que accessibles en tant que variables. Dans certains cas, les variables sont définies, mais dans des fichiers autres que le fichier principal "ui-variables.less". Pour faciliter l’application centralisée de notre palette de couleurs via le fichier "ui-variables.less", nous allons définir quelques variables supplémentaires et apporter quelques modifications à quelques fichiers de thème..
Collez le code suivant dans votre "ui-variables.less" sous les variables de couleur que vous avez ajoutées à l'étape précédente:
// COULEURS PERSONNALISÉES / VARS AJOUTÉS À MOINS DE FICHIERS //tree-view.less @ tree-view-selected-bg: @n_selected; // nouveau> ligne 8 @sidebar: @n_defaultbg; // nouveau> ligne 15 @ sidebar-focus: lighten (@n_defaultbg, 0.5%); // new> line 19 //tabs.less @ tab-default-bg: @n_defaultbg; // nouveau> ligne 45 //tooltips.less @ pointe-fond-couleur: alléger (@ très-gris-clair, 10%); // variables extraites de tooltips.less et placées ici pour un accès @ tip-text-color: @ very-dark-grey; // variables extraites de tooltips.less et placées ici pour un accès
Prenez note des commentaires inclus, gardez une trace des fichiers à modifier et sur quelle ligne pour utiliser ces variables..
Avec vos nouvelles variables en place, vous pouvez maintenant apporter les modifications suivantes à vos fichiers de thème:
tree-view.less> ligne 8: changer à arrière-plan: @ tree-view-selected-bg;
tree-view.less> ligne 15: changer à arrière-plan: @sidebar;
tree-view.less> ligne 19: changer à arrière-plan: @ sidebar-focus;
tabs.less> ligne 45: changer à:
background-image: -webkit-linear-gradient (haut, éclaircir (@ tab-default-bg, 7%), @ tab-default-bg);
tooltips.less> supprimez les lignes 4 et 5:
@ tip-background-color: #fff; @ tip-text-color: # 333;
Ces deux lignes sont supprimées de "tooltips.less" car les variables sont maintenant définies dans le fichier principal "ui-variables.less"..
Nous avons maintenant effectué tous les ajustements nécessaires pour accompagner nos variables nouvellement définies, mais quelques modifications supplémentaires sont nécessaires pour remplacer les couleurs codées en dur et faire en sorte que tous les fichiers de thème fonctionnent correctement avec nos variables..
utilities.less> ligne 6: changer à arrière-plan: plus foncé (@ button-background-color, 5%);
tree-view.less> ligne 29: changer à couleur: allégée (@ très gris clair, 15%)! important;
panneaux.less> ligne 50: changer à
image d'arrière-plan: -webkit-linear-gradient (@ panneau-en-tête-couleur d'arrière-plan, assombrir (@ panneau-en-tête-couleur d'arrière-plan, 5%));
… Rend le dégradé plus subtil pour convenir à nos nouvelles couleurs.
tooltips.less> ligne 11: changer à couleur: saturée (fonce (@red, 10%), 5%);
Nous avons maintenant toutes les couleurs de notre maquette PSD définies en tant que variables et tous les fichiers de thème prêts à répondre aux définitions de "ui-variables.less"..
Il ne reste plus maintenant qu’à mapper nos variables de couleur personnalisées avec les variables par défaut qui étaient déjà en place lorsque nous avons ouvert le fichier «ui-variables.less». Il n'est pas nécessaire de changer la valeur de chaque variable par défaut, car certaines d'entre elles extraient leurs valeurs des autres dans le même fichier. Par exemple nous avons @ text-color-highlight: #fff; et cette valeur est superposée à la ligne suivante de @ text-color-selected: @ text-color-highlight;.
Remplace tout le code entre les commentaires // Couleurs et le commentaire // tailles avec ce code:
@ text-color: @ très gris clair; // a changé @ text-color-subtile: @ light-grey; // a changé @ text-color-highlight: @n_highlight; // a changé @ text-color-selected: @ text-color-highlight; @ text-color-info: @cyan; // a changé @ text-color-success: @blue; // a changé @ text-color-warning: lighten (@orange, 15%); // a changé @ text-color-error: saturate (lighten (@red, 10%), 10%); // a changé @ text-color-ignored: @ text-color-subtile; @ text-color-added: @ text-color-success; @ text-color-renommé: @ text-color-info; @ text-color-modified: @ text-color-warning; @ text-color-remove: @ text-color-error; @ background-color-info: @cyan; // a changé @ background-color-success: @blue; // a changé @ background-color-warning: lighten (@orange, 15%); // a changé @ background-color-error: saturate (lighten (@red, 10%), 10%); // a changé @ background-color-highlight: rgba (255, 255, 255, 0.07); @ background-color-selected: @n_selected; // a changé @ app-background-color: # 333; @ base-background-color: alléger (@ tool-panel-background-color, 5%); @ base-border-color: @n_darkerbg; @ volet-item-background-color: @ base-background-color; @ pane-item-border-color: @n_darkerbg; // a changé @ input-background-color: @ dark-grey; // a changé @ input-border-color: @ base-border-color; @ tool-panel-background-color: @n_darkerbg; // a changé @ tool-panel-panel-color: @ @ base-border-color; @ inset-panel-background-color: @n_defaultbg; // changé @ inset-panel-border-color: @ base-border-color; @ panel-head-background-color: @gray; // a changé @ panel-heading-border-color: fadein (@ base-border-color, 10%); @ overlay-background-color: @ gris foncé; // a changé @ superposition-bordure-couleur: @ fond-couleur-surbrillance; @ couleur de fond du bouton: @gray; // a changé @ bouton-fond-couleur-survol: alléger (@ bouton-fond-couleur, 5%); @ button-background-color-selected: @ gris foncé; // changé @ couleur-couleur-bouton: @ couleur-base-bordure; @ tab-bar-background-color: @ très gris foncé; // a changé @ tab-bar-border-color: darken (@ tab-background-color-active, 10%); @ tab-background-color: @n_defaultbg; // a changé @ tab-background-color-active: @ très gris foncé; // modifié @ tab-border-color: @n_tabborder; // a changé @ tree-view-background-color: @ tool-panel-background-color; @ tree-view-border-color: @ tool-panel-border-color; @ scrollbar-background-color: @ très gris foncé; // a changé @ scrollbar-color: @gray; // a changé @ ui-site-color-1: @ background-color-success; // green @ ui-site-color-2: @ background-color-info; // blue @ ui-site-color-3: @ background-color-warning; // orange @ ui-site-color-4: @purple; // a changé @ ui-site-color-5: @red; // modifié
Il serait un peu excessif d’expliquer chaque ligne de ce code, mais recherchez le commentaire. // modifié à la fin d'une ligne pour voir où nos variables de couleur personnalisées ont été mappées avec les variables par défaut du thème.
N'oubliez pas que si vous ne savez pas exactement où ces variables s'appliquent, vous pouvez vérifier leur corrélation avec Styleguide, comme décrit ci-dessus..
Après avoir enregistré votre fichier "ui-variables.less" (et les autres que vous avez modifiés), votre interface devrait maintenant ressembler à ceci:
Si vous appuyez sur ctrl-shift-p pour afficher la palette de commandes, il devrait ressembler à ceci:
Et si vous appuyez sur ctrl-F le panneau "trouver" au bas de l'éditeur devrait ressembler à ceci:
Vous pouvez télécharger les thèmes de l'interface utilisateur et de la syntaxe "Nuance" terminés sur GitHub:
Et vou
