Hello everyone,
here I leave a small dark-theme for Node RED.
If anyone has any suggestions, please comment.
Greetings.
EDIT 31/12/20 - Please see the post below - A Dark-Theme for Node-RED here! - #12 by selo
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).
1 Like
Hi!
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.
2 Likes
1 Like
Cool! Thanks 
Maybe the developers can accept your fork and merge into the master as choosable option?
I just realized it is not possible to turn on "Dark mode" at Settings by default. I've thought I'm missing something, because I'm still learning NR and it seemed unlogical there is no option for that. 
Searched the forum how to enable it and found your topics. (This too...)
So I guess it's not possible except downloading and installing your forked version every time a new comes out?
Sadly the Browser extension does not convert the white editor into black, and removes other useful colors too. So it's useless:
I do not understand why the low interest. If the developers do not know if it's important enough,
maybe the @moderators could create a poll on this forum:
- "Would you like dark mode theme? (Black background appearance)"
[Always] [Sometimes] [Never] [ Do not show me polls ]
Would be a nice Xmas gift for us 
(At least this forum system can handle dark modem so luckily it does not hurt my eye while I'm typing this message at 04:50am.)
PS: I like the 4-space intent. Maybe that could be an option at settings too.
This is the problem with comment on posts that are almost 2 years old... The information is completely out of date.
It is now possible to install themes using npm and use your settings file to load them. For example: https://www.npmjs.com/package/@node-red-contrib-themes/midnight-red
2 Likes
It's also much easier to use my theme nowadays! See [Announce] @node-red-contrib-themes/solarized-dark-grey.
I've installed it, modified setting.js, restarted NR >> Nothing! Still full white.
@ristomatti < will try yours now.
Then perhaps you haven't done it quite right as many people are successfully using that theme.
What exactly did you put in your settings file?
// Customising the editor
editorTheme: {
editorTheme: {
page: {
css: "/home/openhabian/.node-red/node_modules/@node-red-contrib-themes/midnight-red/theme.css"
}
},
projects: {
// To enable the Projects feature, set this value to true
enabled: false
}
}
You have one too many editorTheme levels there.
There should be one editorTheme setting with page beneath it.
1 Like
Hello everyone,
shortly after publishing this topic, I disconnected from the Node-Red world (due to external circumstances). I see that the information is out of date, although I am glad that other users have published other techniques (better and more modern).
I have updated the GitHub repository with a deprecatory note. I would like to do the same in the initial post of this thread, but I don't see the way, if anyone knows ...
Regards.
I've added a link in your initial post, to your last post so users will be aware.
Please feel free to edit your last post as you wish.
2 Likes
Perfect !!
Thanks.
Thanks for the update @selo! I've wondered where you've disappeared as it was this thread that first inspired me to register on the forum. Just to post a reply with what I had been working at the time...
Hopefully you're still working on dark themes for the communities you've got involved meanwhile. It's an effort that matters to many these days! 
It would be really great, if (at least one) Dark-mode theme would be built-in by default,
and could be switched on with 1 click at the Settings menu.
1 Like
I would like this too, it would simplify things
I suggest to create a feature request for it. I doubt it will happen anytime soon given the fact it would then mean more maintenance work for the already busy core team. Us custom theme makers are pretty much always more or less behind.
Perhaps a standard on the custom theme module structure and a theme selector would be a way to simplify things without effectively pushing maintenance responsibility for the core team? It'd likely require a lot of time and thought as well...
Just for some brainstorming;
It could be useful and more versatile if the properties were living in css variables instead of sass (although I assume sass can produce css variable output), then stuff can handled in the client directly, eg. like setting a "theme" via a context property by means of defining the css root vars/properties. It would eliminate the whole building/linting process - at least for custom themes.
I did originally consider this, but we had a requirement to support IE11 and I didn't want to add in the overhead of extra polyfills.
I think it is inevitable we move to css vars at some point, and that will make themes even easier to do.
One of the new features coming in 1.3 is a new plugin mechanism for Node-RED. One of the use cases for that will be for modules that provide themes to register themselves as plugins - which would provide the mechanism we need for the editor to know what themes the user has installed and allow them to switch between them. Watch this space....
6 Likes
