Personal themes

Software IDE 2.x
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 Visual Studio Marketplace website.

  1. Find a theme you want to install:
    Themes Extensions - Visual Studio Marketplace
  2. Click on the theme to open its extension page.
  3. Click the "Download Extension" link on the right 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/
      :exclamation: The .arduinoIDE folder is hidden by default in the file manager and terminal.
    • macOS:
      ~/.arduinoIDE/
      :exclamation: 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:
    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/
      :exclamation: The .arduinoIDE folder is hidden by default in the file manager and terminal.
    • macOS:
      ~/.arduinoIDE/
      :exclamation: 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\
        :exclamation: 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/
        :exclamation: The .config folder is hidden by default in the file manager and terminal.
    • macOS: 
      • ~/Library/Application Support/arduino-ide/
        :exclamation: The Library folder is hidden by default. You can make it visible by pressing the Command+Shift+. keyboard shortcut.
3 Likes