IDE Arduino avec thème sombre : 6 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:09

Dans ce schéma, nous allons travailler avec l'IDE Arduino et transformer le thème de cet environnement de programmation de clair en sombre pour améliorer la visibilité du code source. Cela permettra une expérience de visionnage moins fatigante.

A ce sujet, nous avons localisé un dossier réalisé par Jeff Thompson, professeur d'art et de technologie aux États-Unis. Avec une base provenant de cet article, modifions les fichiers de configuration pour permettre le changement de couleur dans l'IDE Arduino.

Étape 1: Télécharger

Nous vous conseillons de télécharger le fichier Jeff Thompson depuis GITHUB. Il a modifié certains fichiers dans les bitmaps et les a rendus accessibles sur https://github.com/jeffThompson/DarkArduinoTheme. Vous pouvez également télécharger Notepad ++, qui est très bien pour éditer le fichier XML, ou même le fichier en langage C.

De plus, sur annystudio.com, il existe un logiciel gratuit appelé Jcpicker. Il effectue la conversion RVB en valeurs hexadécimales.

Étape 2: Lisez-moi

Le readme expose que la dernière revue que Jeff Thompson a faite était dans la version 1.6.6+ de l'Arduino, mais nous avons testé dans la version 1.84. Cela a bien fonctionné.

Pour changer la couleur de l'IDE Arduino vous devez décompresser le fichier DarkArduinoTheme.zip qui se trouve dans Github et le copier dans le dossier de l'Arduino.

Je recommande de faire une sauvegarde du dossier du thème si vous souhaitez restaurer les couleurs d'origine.

Pour MAC OS ~ / Applications / Arduino.app / Contenu / Java / lib / theme

Pour Windows `C: / Program Files (x86) Arduino / lib / theme`.

Étape 3: ### Créer vos propres couleurs

Pour créer des thèmes personnalisés, vous devez modifier le fichier theme.txt (un fichier XML dans le dossier de syntaxe) et les fichiers de boutons. N'oubliez pas que pour choisir une couleur, vous devez savoir quelle valeur correspond à l'hexadécimal.

Jeff Thompson a créé un thème sombre, mais nous avons remarqué que le mot Setup, en vert foncé, n'était pas bon pour la visibilité. Nous l'avons donc changé en vert clair, ce qui peut être vérifié dans un fichier theme.txt. Ceci est disponible en téléchargement ici dans le blog, juste en dessous.

Étape 4: syntaxe

Voir la version XML sur

Étape 5: fichier Theme.txt

#FONCTIONS COULEUR #D35400 - ORANGE KEYWORD1#FONCTIONS COULEUR #D35400 - ORANGE KEYWORD2 #COULEURS STRUCTURE #5E6D03 - GREEN KEYWORD3 #VARIABLES COULEUR #00979C - BLEU LITTERAL1 #ERREUR COULEUR #A61717 - ROUGE #COMMENTAIRES GRIS5 // COULEUR #95LIGHT GRA6 COMMENTAIRES /**/ COULEUR #434F54 - GRIS FONCÉ # GUI - STATUT status.notice.fgcolor = #002325 status.notice.bgcolor = #404040 status.error.fgcolor = #FFFFFF status.error.bgcolor = #E34C00 status.edit.fgcolor = #000000 status.edit.bgcolor = #F1B500 status.font = SansSerif, plain, 12 # GUI - TABS # paramètres pour les onglets en haut # (les images des onglets sont stockées dans le dossier lib/theme) header.bgcolor = #404040 header.text.selected.color = #323232 header.text.unselected.color = #3C3C3C header.text.font = SansSerif, plain, 12 # GUI - CONSOLE console.font = Monospaced, plain, 11 console.font.macosx = Monaco, plain, 10 console.color = #000000 console.output.color = #eeeeee console.error.color = #E34C00 # GUI - BOUTONS boutons.bgcolor = #505050 boutons.status.font = SansSe rif, plain, 12 boutons.status.color = #ffffff # GUI - LINESTATUS linestatus.color = #ffffff linestatus.bgcolor = #404040 # EDITOR - DETAILS # couleurs de premier plan et d'arrière-plan editor.fgcolor = #4661FF editor.bgcolor = #202020 # surbrillance pour la ligne actuelle editor.linehighlight.color=#333333 # surbrillance pour la ligne actuelle editor.linehighlight=true # curseur clignotant et couleur du curseur editor.caret.color = #a0a0a0 # couleur à utiliser pour l'arrière-plan lorsque 'éditeur externe ' enabled editor.external.bgcolor = #c8d2dc # couleur de sélection editor.selection.color = #dd8800 # zone qui n'est pas utilisée par le texte (remplacé par des tildes) editor.invalid.style = #7e7e7e, bold # petits pooties au fin des lignes indiquant où elles se terminent editor.eolmarkers = false editor.eolmarkers.color = #006699 # bracket/accolade en surbrillance editor.brackethighlight = true editor.brackethighlight.color = #006699 # TEXTE - MOTS CLES # FONCTIONS editor.keyword1.style = #4661FF, gras editor.data_type.style = #BC3535, gras # METHO DS editor.keyword2.style = #BC3535, plain editor.function.style = #BC3535, plain # STRUCTURES editor.keyword3.style = #00D600, plain editor.reserved_word.style = #00D600, plain # TEXT - LITERALS # constantes & types de données editor.literal1.style = #006699, plain # p5 dans les variables intégrées: par exemple mouseX, width, pixels editor.literal2.style = #00979C, plain editor.variable.style = #00979C, plain editor.reserved_word_2.style = #00979C, plain editor.literal_boolean.style = #00979C, plain editor.literal_char.style = #00979C, plain editor.literal_string_double_quote.style = #00979C, plain editor.preprocessor.style = #00d600, plain # https://www.arduino.cc/ - ELIMINEZ LE SOULIGNEMENT ! editor.url.style = #81A421, plain # ex. + - = / editor.operator.style = #aaaaaa, plain # ?? c'est peut-être pour les mots suivis de deux points # comme les instructions case ou goto editor.label.style = #7e7e7e, bold # TEXT - COMMENTS editor.comment1.style = #aaaaaa, plain editor.comment2.style = #aaaaaa, plain # LINE STATUS - barre d'état du numéro de ligne de l'éditeur en bas de l'écran linestatus.font = SansSerif, plain, 10 linestatus.height = 20 # GUI - PLOTTING # cycle de couleurs créé via colorbrewer2.org plotting.bgcolor = #ffffff plotting.color = #ffffff plotting.graphcolor.size = 4 plotting.graphcolor.00 = #2c7bb6 plotting.graphcolor.01 = #fdae61 plotting.graphcolor.02 = #d7191c plotting.graphcolor.03 = #abd9e9

Étape 6: JCPICKER.exe et Bloc-notes ++

Dans les images Jcpicker et Notepad ++, nous avons remarqué que la couleur sombre est bonne pour la programmation. Dans cette partie, je montre un exemple de fichier default.xml dont les couleurs RVB peuvent également être modifiées.