Arduino IDE dark theme – tworzymy własny motyw cz.1

Arduino IDE – jedni je uwielbiają inni wręcz przeciwnie. Prosty interface użytkownika udostępnia wszystkie potrzebne początkującemu programiście opcje, nie utrudniając nauki skomplikowaną konfiguracją i ogromem opcji. Jednak w całej tej prostocie zabrakło tak podstawowej dla wielu programistów opcji jak zmiana domyślnego wyglądu edytora na ciemny. Czy jesteśmy zmuszeni męczyć oczy białym tłem naszego edytora? Odpowiedź brzmi: NIE! A w dzisiejszym artykule pokaże krok po kroku jak wykonać taką modyfikacje. Stworzymy własny dark theme dla arduino!

Arduino IDE dark theme – Od czego zacząć ?

Pliki odpowiedzialne za wygląd edytora znajdują się w folderze z instalacją naszego arduino, w podfolderze theme. W moim przypadku ścieżka do nich to C:\Program Files\Arduino\lib\theme. Odszukaj w nim plik theme.txt, oraz plik default.xml zlokalizowany w folderze syntax. Otwórzmy zatem oba pliki w ulubionym edytorze tekstu – ja polecam notepad++.

Uwaga : Przed przystąpieniem do edycji plików warto dla bezpieczeństwa zrobić ich kopię np. na pulpicie!

Kolory w plikach są zapisane w postaci heksadecymalnej (szesnastkowej) , dlatego potrzebujemy jakiegoś narzędzia, które umożliwi nam wygodne dobranie koloru i uzyskanie jego zapisu w tej właśnie formie. Ja skorzystałem z pomocy photoshopa, ale jeśli go nie posiadasz możesz skorzystać z dowolnego programu graficznego lub też z przeglądarki – wystarczy, że w google wpiszesz frazę color picker i twoim oczom ukaże się przyjemny i prosty w użyciu mikser kolorów :

google color picker
google color picker

Teraz kiedy mamy już wszystkie potrzebne narzędzia nadszedł czas zajrzeć do plików, które znaleźliśmy w katalogu theme naszego arduino.

Edycja pliku theme.txt

Otwieramy plik theme.txt i naszym oczom ukazuje się coś takiego:

plik theme.txt
fragment pliku theme.txt

Jak widać plik ma nieskomplikowaną budowę i wszystko mamy ładnie opisane w komentarzach. Spróbujmy więc zmienić tło na ciemne (editor.bgcolor), oraz oczywiście napisy (editor.fgcolor) na jasne. Ja wybrałem odpowiednio kolory : #2E2E2E dla tła, oraz #E5E5E5 dla tekstu. Po każdej zmianie w pliku theme.txt musimy ponownie uruchomić arduino IDE aby zobaczyć zmiany. U mnie wygląda to tak :

Arduino IDE dark theme
Efekt pierwszych zmian

Zaczyna robić się ciekawie, jednak nie wszystko jeszcze jest czytelne – zajmiemy się tym w kolejnych krokach. Znajdźmy więc dwie linie odpowiadające za komentarze, są to : editor.comment1.style oraz editor.comment2.style. Pierwsza odpowiada za komentarze liniowe, druga za komentarze blokowe. Ja w obu przypadkach ustawiłem kolor #95A5A5. Aby zmienić oryginalne żółte podświetlanie zaznaczonego tekstu musimy edytować linię editor.selection.color, ja wybrałem kolor #535353 czyli troszkę jaśniejszy od koloru tła edytora. Teraz zajmijmy się kolorowaniem słów kluczowych takich jak : if, while, for, setup, loop itd. Odpowiadają za to linie editor.keyword3.style oraz editor.reserved_word.style, ja nadałem im kolor #8BA00B. Znajdźmy jeszcze linię editor.caret.color – odpowiada ona za kolor kursora, ja nadałem mu kolor #E5E5E5, taki sam kolor dodałem w linii editor.operator.style – odpowiada ona za kropki, przecinki, znaki plusa, minusa itd. Zobaczmy jak teraz prezentuje się edytor arduino :

Arduino IDE dark theme
Coraz bliżej efektu końcowego

Jest dużo lepiej, jednak cyfry oraz nawiasy pozostały czarne co nie wygląda najlepiej.  Aby temu zaradzić musimy edytować plik default.xml. Jego budowa również nie jest skomplikowana i można łatwo rozeznać się w jego opcjach. My odszukajmy trzy linie :

  1. LITERAL_NUMBER_DECIMAL_INT
  2. LITERAL_NUMBER_FLOAT
  3. LITERAL_NUMBER_HEXADECIMAL

Jak łatwo się domyślić pierwsza odpowiada za liczby całkowite zapisane w systemie dziesiętnym, druga za liczby zmiennoprzecinkowe a trzecia za liczby w systemie heksadecymalnym. Ja dla wszystkich trzech ustawiłem kolor FFC85C (w tym pliku przed numerem koloru nie stawiamy znaku #). Pozostało nam zająć się nawiasami, odszukajmy więc linę z wpisem SEPARATOR, ja nadałem mu kolor E5E5E5. Sprawdźmy więc jak teraz prezentuje się całość :

Arduino IDE dark theme
Efekt końcowy – dark theme w arduino IDE

Dla mnie efekt jest całkowicie zadowalający, w końcu mogę siedzieć kilka godzin przed edytorem i nie wyglądać po tym jak spawacz 🙂

Kilka słów na zakończenie

Oczywiście nie wyczerpałem tutaj wszystkich możliwości jakie daje edycja plików theme.txt oraz default.xml w arduino IDE. Dzięki zdobytej tutaj wiedzy wiesz już, że nie musisz godzić się na uporczywe białe tło w swoim edytorze, nie musisz szukać też alternatywnych środowisk programistycznych obsługujących skórki. Wystarczy trochę pracy i możesz stworzyć swój własny niepowtarzalny styl edytora, który nie tylko pozwoli odpocząć zmęczonym oczom, ale da ci również sporo satysfakcji z wykonanej samodzielnie pracy. Zachęcam cię do samodzielnego poeksperymentowania z wyglądem swojego edytora oraz do podzielenia się wynikami tych eksperymentów w komentarzu.

 

W kolejnej części poradnika dowiesz się jak można zmienić standardowy niebieski wygląd okna arduino IDE, tak żeby nie kontrastował z naszym nowym ciemnym motywem okna edytora.

  • 3
    Udostępnienia

Dodaj komentarz

Bądź pierwszy!

avatar
  Subscribe  
Powiadom o