Change Editor Theme

Is it possible to change the NR editor theme? I can install the Node-Modules for the node-red-contrib-themes. But I cannot seem to write to the Setup file for the {editor.theme} field in the NR Setup

Hi Sean, welcome to the forums!

Yes, this is absolutely possible. There are a dozen different settings.js files to choose from, so you’ll need to edit right one, and you’ll need to be logged in as root with sudo su, since the dev user is the owner of all Node-RED files and folders, not the user you create in groov Manage.

Given that, I have to say usual disclaimer for anyone reading this post:
We do not fully support everything you can do via shell, so always be careful when entering commands (ESPECIALLY as root) and be sure to make a backup first. I claim no responsibility for anything you break – you may be stuck doing a full restore with a paperclip.
With great power there must also come great responsibility!

With that out of the way, based on the instructions on GitHub (https://github.com/node-red-contrib-themes/theme-collection) I tested this with the theme-collection module installed to the /home/dev/.node-red folder. For groov EPIC specifically, the file you’ll want to change is /usr/share/nxtio/services/node-red/settings.js and then you will need to restart the Node-RED runtime either through groov Manage, a shell command, or a system reboot.

This is how my Node-RED editor looks on my PR1 running 3.4.0-b55, configured to use the “dracula-scroll” theme:

Also, be aware this change will get blown away by a firmware update or system reset, so you will need to run through the download and setting changes every time you update the firmware.


Bonus round:

You can also change the code editor between Ace and Monaco in this file, and for Monaco you can set a code editor theme (as long as it’s a file in packages/node_modules/@node-red/editor-client/src/vendor/monaco/dist/theme).
Here is an example from my settings.js for my preferred themes:

    editorTheme: {
        theme: "dracula-scroll",
        codeEditor: {
            lib: "monaco",
            options: {
                theme: "night-owl",
            },
        }
    }

Which makes the code editor look like this:

1 Like

@torchard

Brilliant, appreciate the instructions. I had located the .node-red file in the dev user home, and checking PM2 status gave me the pointer that nr was running as a dev user process. I tried two or three ways to get vi and vim to write the settings file I found in nxtio/services/node-red/ and came up empty, I tried :w !sudo tee % as the dev user and what I thought was root.

I should have known this, but its been a while since I have had a user setup that needed sudo su run from a particular user login

dracula-scroll and midnight-red are my choice themes

And moving to 2.2.2 was long overdue both for monaco editor but alot of other grouping and alignment tools that were missing from 2.0.2

1 Like

Looks great! Happy to help.
And yes, we do lock down the user permissions setup pretty tight to prevent anything from being tooo easy to break, but once you log in as root all bets are off.

1 Like