Recipe for installing Node-RED Midnight-red theme under IOTstack

NodeRED_MidnightredTheme.md

IOTstack Recipe: Node-RED Midnight-red theme

Reference

node-red-contrib-themes/midnight-red

Assumptions

1. Your IOTstack is running.

Recipe

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

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

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 this (it is at the end of the file):

    // Customising the editor
    editorTheme: {
        projects: {
            // To enable the Projects feature, set this value to true
            enabled: false
        }
    }

Make it look like this:

    // Customising the editor
    editorTheme: {
        projects: {
            // To enable the Projects feature, set this value to true
            enabled: false
        },
        page: {
            css: "/data/node_modules/@node-red-contrib-themes/midnight-red/theme.css"
        }

    }

Before you save your work, double-check:

1. That you have added a comma after the "}" in the "projects" grouping.
2. That you replaced <HOME>/.node-red (from the instructions) with /data

Save your work.

Restart Node-Red:

$ cd ~/IOTstack
$ docker-compose restart nodered

Check the Node-Red log for signs of problems (you are mainly looking for complaints about syntax errors in your settings.js):

$ docker logs nodered

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

Worked great first time thanks Paraphraser!

Worked great at first. Then I updated my docker container because I made a setting change and the theme went away. Any way to make it stick after container update?

Same here, I just reinstalled. If it was retained it would be good.

Fixed! The changes are quite subtle so I'll point them out:

1. The cd /data after opening a shell in the container.
2. Adding /data onto the end of the npm install command.
3. Changing the path prefix in the JSON (from /usr/src/node-red to /data).

Why do you need to be "in" the /data directory and stick it on the end of the install command? If I could explain that, I'd know a lot more about Node-Red than I actually do!

If you want to force a "clean slate" before you re-apply the recipe, you can simulate the effect of a container update or new version of the nodered image, like this:

$ cd ~/IOTstack
$ docker-compose stop nodered
$ docker-compose rm -f nodered
$ docker-compose up -d nodered

After you follow the revised recipe, you can use the same approach to confirm that the midnight-red theme will persist across container updates.

Thanks for pointing this out. I had not noticed that the change wasn't persistent because I reverted to the default theme to do some screen-captures and then never re-implemented midnight-red.

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.