Finally a beautiful dark theme for Node-RED

mbonani · January 5, 2019, 10:40pm

I just released the first version of my dark theme for Node-RED. It’s based on the midnight theme for Home Assistant. Hope you like it!

mbonani · February 25, 2020, 1:20pm

WOW! A lot has happened since I posted this.

The Midnight theme for Node-RED has a new home now.

And it’s also available as an NPM package.

Most recent screenshot.

mbonani · February 25, 2020, 1:30pm

I also published two more themes.

Solarized Light

Solarized Dark

I hope you like it.

sleeepy2 · March 10, 2021, 3:20pm

I know this is old, but how do I install these?? I see that it mentions npm, but I don’t know where I run this…

Thanks

mbonani · March 10, 2021, 3:58pm

How did you install Node-RED?

sleeepy2 · March 10, 2021, 4:10pm

From the Supervisor Add-On Store.

mbonani · March 10, 2021, 4:20pm

Then just set dark_mode to true in the add-on configuration.

github.com

hassio-addons/addon-node-red/blob/bb3405ce9565b9f521eac9a234598ffffba4e0f0/node-red/DOCS.md#option-dark_mode

# Home Assistant Community Add-on: Node-RED

Node-RED is a programming tool for wiring together hardware devices,
APIs and online services in new and interesting ways.

It provides a browser-based editor that makes it easy to wire together flows
using the wide range of nodes in the palette that can be deployed to its
runtime in a single click.

## Installation

The installation of this add-on is pretty straightforward and not different in
comparison to installing any other Home Assistant add-on.

1. Search for the "Node-RED" add-on in the Home Assistant add-on store and
   install it.
1. Set a `credential_secret`, which is used to encrypt sensitive data.
   This is just a "password", which you should save in a secondary location.
1. Start the "Node-RED" add-on.
1. Check the logs of "Node-RED" to see if everything went well.

This file has been truncated. show original

sleeepy2 · March 10, 2021, 4:33pm

Son of a. How did I miss that, me and my eyes thank you.

johnwyles · May 16, 2021, 9:39am

I know this is old so I hope when dark_mode is deprecated they have options for this.

With HassIO HassOS or whatever the heck it is called where you install with Supervisor how would you go about installing a theme? I got on SSH port 22222 on the host and docker exec -it XXX /bin/bash to get in the container and it doesn’t contain a lot of the requirements to do the npm install.

I didn’t try much further than that before leaving this comment because I tend to break things a lot

mbonani · May 16, 2021, 10:47am

Have you tried the theme option?

github.com

hassio-addons/addon-node-red/blob/a9fe07a2b6deb6b0a17745e1bb568a1caf9d92eb/node-red/DOCS.md#option-theme

# Home Assistant Community Add-on: Node-RED

Node-RED is a programming tool for wiring together hardware devices,
APIs and online services in new and interesting ways.

It provides a browser-based editor that makes it easy to wire together flows
using the wide range of nodes in the palette that can be deployed to its
runtime in a single click.

## Installation

The installation of this add-on is pretty straightforward and not different in
comparison to installing any other Home Assistant add-on.

1. Search for the "Node-RED" add-on in the Home Assistant add-on store and
   install it.
1. Set a `credential_secret`, which is used to encrypt sensitive data.
   This is just a "password", which you should save in a secondary location.
1. Start the "Node-RED" add-on.
1. Check the logs of "Node-RED" to see if everything went well.

This file has been truncated. show original

D4vy · August 13, 2021, 2:08pm

Thank you for this amazing theme. I have it installed for a couple of years now.

For some reason, it had automatically reverted to the default theme which I believe is after a recent update to Home Assistant. Setting the theme option to midnight-red and restarting the NodeRED add-on did the trick! Cheers!

For those of you who are wondering how to do this:

Go to Supervisor
In the list of installed Add-ons, select NodeRED
Go to the Configuration tab
Change the value of the theme to midnight-red
Click SAVE (it will prompt you to restart the add-on)
Confirm to restart the NodeRED add-on
Enjoy the theme

Hope this helps.

mbonani · August 13, 2021, 2:38pm

Thanks for the message.

The release notes of the latest version of the add-on mention that.

The dark_mode option was removed and replaced with the theme option.

TheRidDlerX · September 14, 2021, 9:11pm

For some reason my entire theme uses dark except the actual grid >.< Any ideas?

mbonani · September 14, 2021, 9:30pm

Can you post a screenshot?

TheRidDlerX · September 16, 2021, 11:06pm

Sure thing! Here you go

mbonani · September 17, 2021, 12:34am

That’s weird. Have you tried to clean up the browser’s cache?

TheRidDlerX · September 17, 2021, 2:24pm

Sadly yes. Tried the F12 → Hard Reload and Empty and a CTRL-F5, still stays the same

EDIT : Resolved ! → Dark Reader addon in the browser was changing contrasts. Disabled it for the HA URL and it works now. Thanks!

Turbo4door · October 18, 2021, 7:44pm

So I understand this is an old thread but somehow I’ve got my Node Red into the light theme again (didn’t change it on purpose). It’s set to dark in the add-on configuration. I’ve also tried to set it from the node red dashboard with no luck. Can’t stand the light, but not sure what I’m missing to get it back to dark. Clearing cache doesn’t help, happening on all browsers I’ve tried from.

mbonani · October 18, 2021, 8:54pm

What version of the add-on are you on? Did you change anything in settings.js?

Turbo4door · October 19, 2021, 1:40pm

10.0.1 and no I haven’t made any changes to settings.js. I’m stumped