# Theme selector in the UI

**URL:** https://discourse.nodered.org/t/theme-selector-in-the-ui/88261
**Category:** Feature Requests
**Created:** [25 May 2024 12:39 UTC](https://discourse.nodered.org/t/theme-selector-in-the-ui/88261 "2024-05-25T12:39:26Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![mbonani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mbonani/32/10631_2.png) [@mbonani](https://discourse.nodered.org/u/mbonani)
#### Post date: [25 May 2024 12:39 UTC](https://discourse.nodered.org/t/theme-selector-in-the-ui/88261/1 "2024-05-25T12:39:26Z")

</div>

Now that it will be possible to install and update plugins via the palette, I would love to see the theme selector in the editor settings in Node-RED 4.0.

From the user's perspective, it would be weird to be able to install a theme plugin using the palette and then have to edit settings.js to configure it.

---

<div class="post-metadata">

### Author: ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)
#### Post date: [25 May 2024 12:50 UTC](https://discourse.nodered.org/t/theme-selector-in-the-ui/88261/2 "2024-05-25T12:50:15Z")

</div>

Yeah, where would you put it? `Settings/View/View` ?

---

<div class="post-metadata">

### Author: ![mbonani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mbonani/32/10631_2.png) [@mbonani](https://discourse.nodered.org/u/mbonani)
#### Post date: [25 May 2024 12:56 UTC](https://discourse.nodered.org/t/theme-selector-in-the-ui/88261/3 "2024-05-25T12:56:25Z")

</div>

The initial idea was to put it below the language selector.

> <https://github.com/node-red/node-red/blob/master/packages/node_modules/%40node-red/editor-client/src/js/ui/userSettings.js#L119-L123>

---

<div class="post-metadata">

### Author: ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)
#### Post date: [25 May 2024 13:01 UTC](https://discourse.nodered.org/t/theme-selector-in-the-ui/88261/4 "2024-05-25T13:01:29Z")

</div>

@knolleary @Steve-Mcl why is the selector commented out?

---

<div class="post-metadata">

### Author: ![mbonani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mbonani/32/10631_2.png) [@mbonani](https://discourse.nodered.org/u/mbonani)
#### Post date: [25 May 2024 14:27 UTC](https://discourse.nodered.org/t/theme-selector-in-the-ui/88261/5 "2024-05-25T14:27:27Z")

</div>

@GogoVega you can get some context on that from the last bit of this stream.

[![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/6/6659dd7975492e46182cfead3000a0aa6fce2bf3.jpeg "Theme Plugins - developing node-red stream - 25th January 2021") ](https://www.youtube.com/watch?v=zf__HteZodY&t=6529)

---

<div class="post-metadata">

### Author: ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)
#### Post date: [25 May 2024 16:22 UTC](https://discourse.nodered.org/t/theme-selector-in-the-ui/88261/6 "2024-05-25T16:22:45Z")

</div>

For me the theme should be in `userSettings` - currently it is in `settings`, its a problem because the editor cannot write to `.node-red/settings` file.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [25 May 2024 17:40 UTC](https://discourse.nodered.org/t/theme-selector-in-the-ui/88261/7 "2024-05-25T17:40:17Z")

</div>

> [@GogoVega](#):
>
> the editor cannot write to `.node-red/settings` file

Not sure that is quite correct? In fact, it was discovered not so long ago that you couldn't STOP the editor from being able to update settings.js I believe.

However, you need to restart Node-RED for the settings to be reloaded.

---

<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: [25 May 2024 17:51 UTC](https://discourse.nodered.org/t/theme-selector-in-the-ui/88261/8 "2024-05-25T17:51:06Z")

</div>

> [@TotallyInformation](#):
>
> Not sure that is quite correct?

Whilst you are technically correct, you are also wrong. As a point of principle, the node-red runtime cannot write back to the runtime settings object as the storage API that abstracts away whether it is a local file or not does not provide a means to do so. No feature added to the core of node-red will rely on writing back to that object (which may or may not be a file).

The storage API _does_ provide an api for storing user settings - this is what is used to store the options that are made in the editor (grid size etc). This would be entirely the right place to store a users choice of theme and not worth any discussion because that's how it works.

The main issue with this feature remains the one that stopped us implementing it long ago when themes were first introduced. The way the editor loads the current theme means it is loaded long before we know who the user is that is accessing the editor. By the time we know who the user is, it is too late to change the theme already loaded in the editor. I suspect this is the point I make at the end of the video @mbonani referenced.

So to have theme selection in the UI will require a fairly fundamental change to the way themes are loaded. Hence why this seemingly easy feature request has not been done to date.

---

<div class="post-metadata">

### Author: ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)
#### Post date: [25 May 2024 18:01 UTC](https://discourse.nodered.org/t/theme-selector-in-the-ui/88261/9 "2024-05-25T18:01:16Z")

</div>

> [@knolleary](#):
>
> The way the editor loads the current theme means it is loaded long before we know who the user is that is accessing the editor.

Yes, that's what I read in the code. I spent a few hours trying to find a simple way to modify the runtime settings without success.

We should separate the `theme.context()` part: when loading the editor, the `editorApp` only returns the `defaultContext`. Then add a part to `editorApp` which retrieves the connected user and sends the plugin themes. I don't really see where we could insert this part 🤔

---

<div class="post-metadata">

### Author: ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)
#### Post date: [26 May 2024 08:54 UTC](https://discourse.nodered.org/t/theme-selector-in-the-ui/88261/10 "2024-05-26T08:54:13Z")

</div>

Along the same lines, would it be interesting to create a node/plugin filter for the palette installer?

Note: the catalog will need a new property.

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [25 July 2024 08:54 UTC](https://discourse.nodered.org/t/theme-selector-in-the-ui/88261/11 "2024-07-25T08:54:48Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
