Recipe for installing and activating themes for the Node-RED GUI under IOTstack

NodeRED_Themes.md

IOTstack Recipe: Node-RED themes

This gist explains how to activate a theme for the Node-RED graphical user interface under IOTstack.

Reference

• Node-RED themes collection

Step 1: install the themes package

option 1: via the IOTstack menu

At the time of writing (2024-07-30) your ability to use the menu to install the required package depends on a pull request for IOTstack (PR776) which may not have been processed. If you can't complete step 4 below, you will have to use one of the other options.

If you use the IOTstack menu to manage your stack, you can proceed like this:

1. Launch the IOTstack menu and go into "Build Stack"

2. Put the cursor on Node-RED and press the right-arrow (➡) to enter the features menu.

3. Put the cursor on "Select & build addons list" and press enter.

4. Put the cursor on @node-red-contrib-themes/theme-collection and press space to activate the node.

5. Press enter (returns to the NodeRED options menu).

6. Put the cursor on "Go back" and press enter.

7. Press enter to build the stack.

8. Put the cursor on "Exit" and press enter.

9. Rebuild Node-RED:

   $ cd ~/IOTstack
   $ docker-compose up --build -d nodered
   $ docker system prune -f

option 2: hand-edit your Dockerfile

1. Use a text editor to open the following file:

   ~/IOTstack/services/nodered/Dockerfile
   

2. Add the following line at the end of the file:

   RUN cd /usr/src/node-red && npm install --save  @node-red-contrib-themes/theme-collection

3. Save your work.

4. Rebuild Node-RED:

   $ cd ~/IOTstack
   $ docker-compose up --build -d nodered
   $ docker system prune -f

option 3: direct addition

The main benefits of using options 1 and 2 are:

1. The package forms part of your Dockerfile. If you ever need to rebuild Node-RED from a clean slate, the themes package will always be reinstalled for you.
2. Whenever you rebuild your Node-RED container, the themes package will be updated for free (along with all your other add-on nodes).

With this "direct addition" method, you will need to remember to re-add the package during any rebuild, and to update it periodically.

Open a shell into the nodered container and install the package:

$ docker exec -it nodered bash
# cd /data
# npm install @node-red-contrib-themes/theme-collection /data
# exit
$

Step 2: tell Node-RED which theme to use

Switch to the Node-Red data directory:

$ cd ~/IOTstack/volumes/nodered/data

Make a backup of your settings.js:

$ sudo cp settings.js settings.js.bak 

Open settings.js in your favourite text editor. My first encounter with Unix was circa 1984 so I use VI out of very-deeply-ingrained habit 🤯:

$ sudo vi settings.js 

Search for "editorTheme". You should find this:

    editorTheme: {
        /** The following property can be used to set a custom theme for the editor.
         * See https://github.com/node-red-contrib-themes/theme-collection for
         * a collection of themes to chose from.
         */
        //theme: "",

Node-RED supports numerous themes. For example, to activate the "midnight-red" theme:

1. Un-comment the last line of the above and make it look like this

           theme: "midnight-red",

2. Save your work.

3. Restart Node-Red:

   $ cd ~/IOTstack
   $ docker-compose restart nodered
   

4. Check for signs of problems using the following commands:

   $ docker ps
   $ docker logs nodered
   

5. If all seems well, reload your Node-Red browser page. Enjoy!

It works great now after and update. Thank you for doing this.

Also working for me after updates, thanks @Paraphraser

Worked just now, easier on the eyes.