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
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 (GitHub - node-red-contrib-themes/theme-collection: A collection of themes for Node-RED) 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.
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:
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
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.
Hi torchard
Would like to make this change to my node -red editor and have shell access setup. When I try to login with sudo su it asks for password and none of my passwords allow access. Obviously when I login under my main account I get access but can’t get into the .node-red folder to install the themes. Is there something I am missing?
Use the same password that you access shell with.
If you have messed with the sudoers file, then that’s on you… But otherwise, if you can log into a shell session, then thats your sudo su password as well.
Just want to get this strait. I was able to make everyting work just fine on my desktop version of Node-Red. When I open an SSH connection with PuTTY Login is sudo su it does not work with my password.
login as: sudo su
sudo su@SHFMI-GROOV-EPIC’s password:
Access denied
sudo su@SHFMI-GROOV-EPIC’s password:
I can login under my main user name and do a sudo just fine the password works then.
I have not modified any files what so ever.
Thanks,
Weird got in after rebooting everything.
Thanks,
Ah, Ok, there is the problem…
Don’t log in with sudo su, log in as your shell user and password.
Do something like sudo apt-get update, you need to enter your shell password.
Then you do your sudo su and give your shell password.
You can’t log in as sudo su, thats not a user.
Glad you got it working, don’t forget, after a firmware update, the theme settings will need to be re-done.
Yep got it thanks for all the help!
OK, so I have been away from this for a few days and ran into a little hiccup editing the settings.js file. Where in the file do you edit? I entered the java code on the last line and it stops the boot process. Is there a special spot where this needs to be entered? When I made this edit on my desktop version the settings.js had a spot in it already to make the edit. Also, just want to make sure the installation of the package goes in the /home/dev/.node-red folder correct? Really not trying to be a pain just would like to have a dark theme on my editor and not super at Java coding. FYI I am making edits to the file with nano if that helps.If you can post an example of a modified settings.js file would be awesome as well.
I don’t see anywhere in the settings file an editorTheme object so is it just added or am I missing something?
editorTheme: {
theme: “dracula-scroll”,
codeEditor: {
lib: “monaco”,
options: {
theme: “night-owl”,
},
}
}
Thanks for all the help with us newbies
@bjohnson you will need to make sure you paste the code inside the module.exports object, not just at the end of the file. You could use the desktop settings.js as a sort of guide on where it belongs, but here’s a screenshot of my settings file to help you out:
Note that I need a comma after the last object, right above editorTheme. I also need four closing brackets for: options, codeEditor, editorTheme, and finally the main module.export = { at the top of the file.
If you can, try to match the indenting so it’s easier to spot if anything is incorrect.
Let us know if that gets you up and running.
Thanks for taking the time to work me through this. I really appreciate all the help that you offer your customers.
This is one of the many reasons I will be an OPTO 22 customer for life.
