A Dark-Theme for Node-RED here!


Hello everyone,

here I leave a small dark-theme for Node RED.

If anyone has any suggestions, please comment.



There is also this Dark Reader If you use chrome.
It gives you dark mode on whole browser and and can be switched on and off easily with button at top of browser (the icon that looks like 2 red eyes top right). Only issue is that it does slow browser responce by about .5 to 1 sec on my system. here is a screen shot,

adds dark mode to Home Assistant as well! This is what it looks like with the default Home Assistant Theme active. The look changes depending on what theme you are using. So if you have 6 custom themes , when you turn on dark mode you have 6 more variations without changing any code in ha (Bonus).



I've also created a dark theme for Node-RED. Initially I did it by writing a userstyle that could be used through the Stylus browser extension. But unfortunately some parts of the UI turned out to be too painful to change using CSS overrides (besides I also wanted it to be dark on my tablet to which I cannot install Stylus), so out of desperation I've created a fork.

On my fork I've added a CSS override file to the build scripts and also added my own code color theme for the embedded Ace editor. It looks like this:

I rebase my fork from Node-RED master repository every now and then (currently it's up to date). If someone happens to be interested in trying this out, you can find my fork here: https://github.com/ristomatti/node-red

What you need to do is clone the repository and run:

$ npm install
$ npm build

and then run it with node:

$ node red

One thing to note though is I've also changed the Ace editor indent size to 2 spaces instead of 4.


Screenshot of the code editor:

(I was not able to add two images to a single post as a new user)