Personal themes

Development Tools IDE 2.x
1

Hi all,
I would like to make some adjustment to the theme, but I do not see where they are.
In 1.... They were under lib/themes, but with 2.0 I do not find neither the lib's nor the themes.
Thanks

2

Hi @F6EEQ. Arduino IDE 2.x uses a completely different theme system than Arduino IDE 1.x, so none of the information about the 1.x theme system is applicable in any way to Arduino IDE 2.x.

Arduino IDE 2.x is built on the Eclipse Theia IDE framework, which allows it to use VS Code themes.

Table of Contents

Install a Pre-Made Theme

If you have used VS Code, you will be used to installing extensions via the manager in the application. Arduino IDE 2.x does not have that capability, so the installation process is different.

Find Theme

You can find a huge number of free pre-made VS Code themes on the Open VSX Registry website.

  1. Find a theme you want to install:
    Open VSX Registry
  2. Click on the theme to open its extension page.
  3. Click the "DOWNLOAD" link at the right hand side of the page.
  4. Wait for the download to finish.

Install Theme in Arduino IDE

The downloaded file will have the .vsix file extension of VS Code extensions. This file is really a ZIP archive. It must be unzipped to a folder and then that folder copied to a specific location under the Arduino IDE installation:

  1. Unzip the downloaded file to a folder. The result will look something like this:

    some-theme/
├── [Content_Types].xml
├── extension/
└── extension.vsixmanifest

    ⓘ Depending on which unzipping utility you use, it may help to rename the file to use a .zip extension. For example, on Windows that will allow you to right click the file and select "Extract All..." from the context menu.

  2. Create a folder named plugins under Arduino IDE's configuration folder:

    • Windows:
      C:\Users\<username>\.arduinoIDE\
      (where <username> is your Windows username)
    • Linux:
      ~/.arduinoIDE/
      :red_exclamation_mark: The .arduinoIDE folder is hidden by default in the file manager and terminal.
    • macOS:
      ~/.arduinoIDE/
      :red_exclamation_mark: The .arduinoIDE folder is hidden by default. You can make it visible by pressing the Command+Shift+. keyboard shortcut.

    ⓘ If you are using Arduino IDE 2.0.4 or older, name the folder extensions instead of plugins, and substitute that folder name in the rest of the instructions.

  3. Copy the unzipped theme folder to the plugins folder you created.
    (e.g., C:\Users\<username>\.arduinoIDE\plugins\some-theme).

  4. If Arduino IDE is running, select File > Quit from the Arduino IDE menus to exit all windows.

  5. Start Arduino IDE.

  6. Select File > Preferences from the Arduino IDE menus.

  7. Open the "Theme" menu.

  8. Select the name of the new theme from the menu.

  9. Click the OK button.

Make a Custom Theme

In case you don't find a pre-made theme to your liking, or you just want to experiment with the theme system, you can make your own.

I will provide some basic instructions below.

Note that there is a ton of information available on the Internet about creating VS Code themes. Except for some small differences, that information will also be applicable to creating a theme for use with Arduino IDE. So if you find that the information I share below is deficient, it is likely your questions can be answered with a quick Google search. When searching for this information do not use keywords like "arduino", since this would poison your search by filtering out many valuable results.

Generate VS Code Extension Template

VS Code themes are packaged as extensions. This requires setting up some basic metadata in addition to the theme configuration data. One option for setting this up is to use the free open source Yeoman tool:

  1. If you don't have it already, install Node.js:
    Node.js — Download Node.js®
  2. Open a command line terminal at a convenient location.
    The extension will be created in a subfolder of this location.
  3. Run the following command from the command line:
    npx --package=yo --package=generator-code yo code
  4. If you get a "Need to install the following packages: ..." prompt, press Enter to confirm.
  5. Wait for the packages to load.
  6. When you see the "What type of extension do you want to create? (Use arrow keys)" prompt, press the ↓ key until "New Color Theme" is selected.
  7. Press the Enter key.
  8. At the "Do you want to import or convert an existing TextMate color theme? (Use arrow keys)" prompt, select "No, start fresh".
  9. You will now be presented with a series of prompts about how you would like to configure your theme. Respond to these according to your preferences.
  10. At the end of the process, the extension template will be written to disk and its path will be shown.
    For example:
    Writing in C:\Users\asdf\Documents\my-theme...

Design Theme

There are several options for designing the theme. I'll describe a couple of them below:

Manually

A JSON format theme data file was created by the previous step under the themes subfolder of the extension folder (e.g., C:\Users\asdf\Documents\my-theme\themes\my-theme.json). If you like, you can open this file in a text editor and make your preferred changes manually.

VS Code Theme Studio

A website is available to design themes via a GUI interface:

  1. Sign in to the VS Code Theme Studio site: https://themes.vscode.one/
  2. Select "Create New Theme" from the menu on the left side of the page.
  3. Select your preference of whether to start from a "light" or "dark" base theme from the "Light or dark?" dialog.
  4. Click the Create Theme button.
  5. Select the component you would like to customize from the menu on the left side of the page.
  6. Select the color you would like for that component.
    You will see a preview of how it looks in the simulated VS Code window on the page.
  7. Repeat until you have finished your customizations.
  8. Click the Save Theme button at the top right corner of the page.
  9. Hover your mouse pointer over the theme you created.
  10. Click the icon that looks like a cloud with a downward pointing arrow to download the theme to your computer.
  11. Replace the content of the file in the themes subfolder of the extension you created in the first step (e.g., C:\Users\asdf\Documents\my-theme\themes\my-theme.json) with the content of the downloaded file.

Install Theme in Arduino IDE

  1. Create a folder named plugins under Arduino IDE's configuration folder:

    • Windows:
      C:\Users\<username>\.arduinoIDE\
      (where <username> is your Windows username)
    • Linux:
      ~/.arduinoIDE/
      :red_exclamation_mark: The .arduinoIDE folder is hidden by default in the file manager and terminal.
    • macOS:
      ~/.arduinoIDE/
      :red_exclamation_mark: The .arduinoIDE folder is hidden by default. You can make it visible by pressing the Command+Shift+. keyboard shortcut.

    ⓘ If you are using Arduino IDE 2.0.4 or older, name the folder extensions instead of plugins, and substitute that folder name in the rest of the instructions.

  2. Copy the folder of your theme extension created to the plugins folder you created.
    (e.g., C:\Users\<username>\.arduinoIDE\plugins\my-theme)

  3. If Arduino IDE is running, select File > Quit from the Arduino IDE menus to exit all windows.

  4. Start Arduino IDE.

  5. Select File > Preferences from the Arduino IDE menus.

  6. Open the "Theme" menu.

  7. Select the name you assigned your theme extension in the first step from the menu.

  8. Click the OK button.

Uninstalling Themes

If you later decide you would like to remove one of the additional themes (whether pre-made or custom) you installed, it can be done by following these instructions:

:warning: Please be very careful when deleting things from your computer. When in doubt, back up!

  1. Start Arduino IDE if it is not already running.
  2. Select File > Preferences... from the Arduino IDE menus.
  3. Select a different theme from the "Theme" menu.
  4. Select File > Quit from the Arduino IDE menus.
  5. Delete the folder of the extension from the folder named plugins under Arduino IDE's configuration folder (see the installation instructions above for the specific location).
    (e.g., C:\Users\<username>\.arduinoIDE\plugins\some-theme)
  6. Delete the folder where Arduino IDE stores user data:
    ⓘ This step is necessary as a workaround for a bug in the IDE framework.
    • Windows: 
      • C:\Users\<username>\AppData\Roaming\arduino-ide\
        :red_exclamation_mark: The C:\Users\<user name>\AppData folder is hidden by default. On Windows "File Explorer", you can make it visible by opening the "View" menu, then checking the box next to "☐ Hidden items".
    • Linux: 
      • ~/.config/arduino-ide/
        :red_exclamation_mark: The .config folder is hidden by default in the file manager and terminal.
    • macOS: 
      • ~/Library/Application Support/arduino-ide/
        :red_exclamation_mark: The Library folder is hidden by default. You can make it visible by pressing the Command+Shift+. keyboard shortcut.
3

Thanks for this very precise answer.
It seems a little bit complicated, but I will give it a try.
I know VS but I do not use it because I find it is kind of overkill for small programs as I do with Arduino.

Have a nice day.
Gerard

7

@in0
I just tried installing a theme that I dowloaded from VS Studio Marketplace and followed you installation instructions and the new themes did not appear. Theme I am using is duotone ( Atom One Dark Theme - Visual Studio Marketplace)

I created the extensions folder, created a new folder named duotone since it doesnt extract with [some-theme] name.

Then I opened the ide (using 2.0.3) but the new themes did not appear in the theme menu.

Any help would be appreciated

8

Version 2.0.3 release broke support for installing external themes. This problem was quickly fixed. Please update to the latest nightly build from here

9

@Willem43
That fixed the issue. Just downloaded and installed the nightly and works like a charm.

Thank you.

10

The default color scheme used by Arduino IDE looks great to me mostly, apart from the completely unreadable red on black in the Output window. So I was looking how to change that and ended up here. I am somewhat intimidated by the information I found here... Do I really have to go through all this hassle of setting up another coding environment to create my own theme for the Arduino IDE to only change that one window's colors? The other option, downloading one, seems just as hopeless, as that page is a huuuuge list that shows only non-descriptive names for the themes available, so I would have to go and download some themes at random and install them one by one to see what they look like until I find one that suits my wishes? You must be kidding, right?

11

I use the Light (Theia) theme which is close to what I like but want to just make a few color changes. In my previous version, 1.8.12 it was a simple matter of editing the theme.txt file. I could not find any file which relates to the Theia theme. Is there some way other than the complex process explained here for downloading themes or creating custom themes to do this? Or should I just uninstall 2.0.3 and go back to 1.8.12?

12

I have installed IDE 2.0.4-nightly-2023013 and followed the process described in the post of in0 on installing a pre-made theme. I downloaded the theme ms-vscode.cpptools-themes-2.0.0.vsix from the Visual Studio Marketplace and extracted to the extensions folder. After quitting and restarting the IDE I did not find the new theme in the “Theme” menu. What am I doing wrong?

13

For what it's worth, I downloaded the file you mentioned:

I am running W11 yesterday's daily build.
I renamed the to zip file, created a directory within the specified directory and unziped:
Directory looks like:

image
image1042×389 25.6 KB

I closed the IDE and restarted. Brought up the preferences:

image
image1189×977 73.9 KB

And I believe it added at least those 4 themes I show in Green.

14

Thanks for your reply. It appears your experience was the same as mine, (except you were successful and I was not). When I upgraded to 2.0.4 I thought that would be the solution to the problem but apparnetly not. I'm out of ideas.

15

I was able to install those four themes by first uninstalling the IDE and then reinstalling it. I edited one of the themes to what I wanted and then attempted to uninstall the others but when I got to step 6, (Delete the User Data folder), there was no such folder at the specified location. So I now have nine themes on the preferences page, only one of which I use. Anybody out there have advice?

16

I find if I delete a theme folder from the extension folder it does get dropped.

However, the IDE caches the themes and it only gets removed from the dropdown if you delete "C:\Users\username\AppData\Roaming\arduino-ide" as well (in Windows - remember the "AppData" folder is normally hidden).

17

Thanks for your response. The contents of the arduino-ide folder is below. What exactly should I delete?

Screenshot 2023-01-28 16.57.18

18

@ARDTECH Delete the actual arduino-ide folder (with all its contents). When starting the IDE a new arduino-ide folder will be created with default settings.

If you are worried about simply deleting it, rename it to start with.

NOTE: You need to close the IDE before deleting the folder.

19

Thanks again. That removed the unwanted themes except for the following:

Light (Arduino)
Dark (Arduino)
Dark (Theia)
Light (Theia)
High Contrast (Theia)

Is there any way to remove these?

20

Not that I know off. Those are the build-in themes that come with the IDE. The Theia Light and Dark will eventually be removed, if I understand things correctly.