Go Down

Topic: Tutorial: How to change the theme (colors) in Arduino IDE (Read 433 times) previous topic - next topic

coffeeguy

Aug 30, 2020, 12:05 pm Last Edit: Aug 30, 2020, 03:20 pm by coffeeguy Reason: Make more readable
The graphical user interface of the Arduino IDE is partially customizeable. You can install new themes (color schemes), or even create your own.

Here are some dark theme examples. See attachments for files.












In Windows 10, Your default theme is a folder named "theme", usually located in Program Files (x86) / Arduino / lib /

Do not alter your default theme, and do not exchange your default theme with a custom theme. Just leave your default theme where it is, as it is.

My understanding is that the practice of replacing the default theme is outdated and should only be done on older versions of the IDE. However, if you wish to make your own theme, you could make a copy of the theme folder to modify.



How to install a custom theme:

1) A custom IDE theme should come as a .zip file. Download the .zip file to your computer. (Obviously, also make sure the source of the file is legitimate / not malware)

2) Open the .zip file and make sure the contents look like your default "theme" folder. There should be .png, .svg, and .txt files directly within the zip directory, not contained within another folder in the zip.

Correct structure:
{custom theme name}.zip/
 ---Syntax/ (folder)
 ---Images (several .PNG files)
 ---Vector graphics (several .SVG files)
 ---theme.txt


Incorrect structure:
{custom theme name}.zip/
 ---Theme/ (folder)
 ------Syntax/ (folder)
 ------Images (several .PNG files)
 ------Vector graphics (several .SVG files)
 ------theme.txt


3) Open the Arduino IDE and go to preferences (ctrl + comma) .

4) At the top you should see the location of your sketchbook folder. Find this folder.

5) Create a new folder inside the sketchbook folder, call it "theme".

6) Drag and drop your custom theme into the new theme folder.

7) Correct location: {Sketchbook folder name} / theme / {custom theme name}.zip

8] Go back to the preferences window in the Arduino IDE. There should be a dropdown menu where you can chose your new theme or the default theme. If not, quit and restart the IDE.

9) Select the new theme in the dropdown menu and then close all windows of the IDE.

10) Restart the Arduino IDE and enjoy your new theme.

You can switch back to the default theme in the same manner, or add new custom themes.



How to build your own themes (by pert): https://github.com/per1234/ThemeTest
If you want, you can use this free, browser based image editor to edit the .SVG images: https://www.photopea.com/
(also good for finding color codes).


Go Up