# A Dark-Theme for Node-RED here!

**URL:** <https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669>\
**Category:** Share Your Projects\
**Created:** [18 July 2018 17:03 UTC](https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669 "2018-07-18T17:03:04Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![selo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/selo/32/1236_2.png) [@selo](https://discourse.nodered.org/u/selo)\
**Post date:** [18 July 2018 17:03 UTC](https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669/1 "2018-07-18T17:03:04Z")

</div>

Hello everyone,

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

If anyone has any suggestions, please comment.

Greetings.

 ![screenshot_darkred](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/fa74451abd97d75b98027ac61ccfda2733ebe5ce.png)

> **[opselo/darkRed](https://github.com/opselo/darkRed)**
>
> A dark theme for node-red editor. Contribute to opselo/darkRed development by creating an account on GitHub.

**EDIT 31/12/20 - Please see the post below** - [A Dark-Theme for Node-RED here! - #12 by selo](https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669/12)

---

<div class="post-metadata">

**Author:** ![msauto](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/msauto/32/32807_2.png) [@msauto](https://discourse.nodered.org/u/msauto)\
**Post date:** [9 February 2019 00:42 UTC](https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669/2 "2019-02-09T00:42:12Z")

</div>

There is also this [Dark Reader](https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh?hl=en-US) 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,

 ![nodereddarkreader](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/3321af67fcde50403011e7cc02470eb74a018495.png)

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).

 ![Screenshot%20(19)](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/0b0ab7f49df93da8107e65918f9c5cadb882ac21.png)

---

<div class="post-metadata">

**Author:** ![ristomatti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ristomatti/32/5857_2.png) [@ristomatti](https://discourse.nodered.org/u/ristomatti)\
**Post date:** [9 February 2019 19:58 UTC](https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669/3 "2019-02-09T19:58:03Z")

</div>

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:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/14ec887c969fd81d43e3059b01f50187326172ef.png)

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](https://github.com/ristomatti/node-red)

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

```auto
$ npm install
$ npm build

```

and then run it with node:

```auto
$ node red

```

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

---

<div class="post-metadata">

**Author:** ![ristomatti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ristomatti/32/5857_2.png) [@ristomatti](https://discourse.nodered.org/u/ristomatti)\
**Post date:** [9 February 2019 20:00 UTC](https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669/4 "2019-02-09T20:00:25Z")

</div>

Screenshot of the code editor:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/141148d4c2c3facccba8238deb2e687c6e64f3a7.png)

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

---

<div class="post-metadata">

**Author:** ![PizzaProgram](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pizzaprogram/32/19431_2.png) [@PizzaProgram](https://discourse.nodered.org/u/PizzaProgram)\
**Post date:** [26 December 2020 03:55 UTC](https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669/5 "2020-12-26T03:55:40Z")

</div>

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...](https://discourse.nodered.org/t/one-more-vote-for-making-the-dark-theme-the-default-theme-on-install/33833/5))  
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:

 ![kép](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/9/095ba816efd88e2c1f2b4ce316dfbbd3a9985047.png)

I do not understand why the low interest. If the developers do not know if it's important enough,  
maybe the [@moderators](https://discourse.nodered.org/groups/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.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [26 December 2020 09:23 UTC](https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669/6 "2020-12-26T09:23:12Z")

</div>

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](https://www.npmjs.com/package/@node-red-contrib-themes/midnight-red)

---

<div class="post-metadata">

**Author:** ![ristomatti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ristomatti/32/5857_2.png) [@ristomatti](https://discourse.nodered.org/u/ristomatti)\
**Post date:** [27 December 2020 15:21 UTC](https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669/7 "2020-12-27T15:21:55Z")

</div>

It's also much easier to use my theme nowadays! See [[Announce] @node-red-contrib-themes/solarized-dark-grey](https://discourse.nodered.org/t/announce-node-red-contrib-themes-solarized-dark-grey/29504).

---

<div class="post-metadata">

**Author:** ![PizzaProgram](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pizzaprogram/32/19431_2.png) [@PizzaProgram](https://discourse.nodered.org/u/PizzaProgram)\
**Post date:** [27 December 2020 18:52 UTC](https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669/8 "2020-12-27T18:52:32Z")

</div>

> [@knolleary](#):
>
> [https://www.npmjs.com/package/@node-red-contrib-themes/midnight-red](https://www.npmjs.com/package/@node-red-contrib-themes/midnight-red)

I've installed it, modified setting.js, restarted NR \>\> Nothing! Still full white.

* * *

@ristomatti \< will try yours now.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [27 December 2020 19:09 UTC](https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669/9 "2020-12-27T19:09:31Z")

</div>

> [@PizzaProgram](#):
>
> I've installed it, modified setting.js, restarted NR \>\> Nothing! Still full white.

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?

---

<div class="post-metadata">

**Author:** ![PizzaProgram](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pizzaprogram/32/19431_2.png) [@PizzaProgram](https://discourse.nodered.org/u/PizzaProgram)\
**Post date:** [27 December 2020 23:05 UTC](https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669/10 "2020-12-27T23:05:04Z")

</div>

```auto
    // 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
        }
    }

```

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [27 December 2020 23:12 UTC](https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669/11 "2020-12-27T23:12:07Z")

</div>

You have one too many `editorTheme` levels there.

There should be one `editorTheme` setting with `page` beneath it.

---

<div class="post-metadata">

**Author:** ![selo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/selo/32/1236_2.png) [@selo](https://discourse.nodered.org/u/selo)\
**Post date:** [31 December 2020 11:19 UTC](https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669/12 "2020-12-31T11:19:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [31 December 2020 11:49 UTC](https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669/13 "2020-12-31T11:49:39Z")

</div>

> [@selo](#):
>
> I would like to do the same in the initial post of this thread

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.

---

<div class="post-metadata">

**Author:** ![selo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/selo/32/1236_2.png) [@selo](https://discourse.nodered.org/u/selo)\
**Post date:** [31 December 2020 11:58 UTC](https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669/14 "2020-12-31T11:58:27Z")

</div>

Perfect !!  
Thanks.

---

<div class="post-metadata">

**Author:** ![ristomatti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ristomatti/32/5857_2.png) [@ristomatti](https://discourse.nodered.org/u/ristomatti)\
**Post date:** [4 January 2021 02:00 UTC](https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669/15 "2021-01-04T02:00:25Z")

</div>

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! 🙂

---

<div class="post-metadata">

**Author:** ![PizzaProgram](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pizzaprogram/32/19431_2.png) [@PizzaProgram](https://discourse.nodered.org/u/PizzaProgram)\
**Post date:** [4 January 2021 11:18 UTC](https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669/16 "2021-01-04T11:18:56Z")

</div>

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.  
 ![kép](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/5/d565e19d8d0eee7785d59ed09137d0b667ab4406.png)

---

<div class="post-metadata">

**Author:** ![softy2k](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/softy2k/32/23707_2.png) [@softy2k](https://discourse.nodered.org/u/softy2k)\
**Post date:** [4 January 2021 11:41 UTC](https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669/17 "2021-01-04T11:41:39Z")

</div>

I would like this too, it would simplify things

---

<div class="post-metadata">

**Author:** ![ristomatti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ristomatti/32/5857_2.png) [@ristomatti](https://discourse.nodered.org/u/ristomatti)\
**Post date:** [13 January 2021 05:09 UTC](https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669/18 "2021-01-13T05:09:18Z")

</div>

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...

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [13 January 2021 07:18 UTC](https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669/19 "2021-01-13T07:18:02Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [13 January 2021 09:27 UTC](https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669/20 "2021-01-13T09:27:30Z")

</div>

> [@bakman2](#):
>
> It could be useful and more versatile if the properties were living in css variables instead of sass

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....

[Next page](https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669.md?page=2)