# The buttons in/on the edit screen

**URL:** <https://discourse.nodered.org/t/the-buttons-in-on-the-edit-screen/25671>\
**Category:** Feature Requests\
**Created:** [28 April 2020 09:32 UTC](https://discourse.nodered.org/t/the-buttons-in-on-the-edit-screen/25671 "2020-04-28T09:32:49Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [28 April 2020 09:32 UTC](https://discourse.nodered.org/t/the-buttons-in-on-the-edit-screen/25671/1 "2020-04-28T09:32:49Z")

</div>

(Sorry, this is the _best fit_ group I can see)

I know it has been raised before, but as it is I keep getting caught with the buttons.

For example this: Two sets of buttons which keep catching me.

 ![Screenshot from 2020-04-28 19-26-59](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/1/310db6b1fb4a6af11f3b9c259db9458fb5fac2c9.png)

Another example:

![Screenshot from 2020-04-28 19-31-32](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/8/78660937acb7fc0f30b64a1bf9cdb84e97ddb0aa.png)

Remember: These are \*_push_ buttons.

Yet, when you _push_ them the button comes **up**. Which really can't happen in the real world. You **push** (or maybe press) a button: it moves **down**.

So when I want to select something I have to keep asking myself what I want, and _why there are two of three buttons pressed?_

When really the one _pressed_ button is up.

Why is the selected button UP when you press it to select it?

---

<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:** [28 April 2020 09:42 UTC](https://discourse.nodered.org/t/the-buttons-in-on-the-edit-screen/25671/2 "2020-04-28T09:42:32Z")

</div>

But the currently selected button is _down_. (read it as: it sits in the shadow of) - you read it as: it is "on" instead.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [28 April 2020 09:43 UTC](https://discourse.nodered.org/t/the-buttons-in-on-the-edit-screen/25671/3 "2020-04-28T09:43:58Z")

</div>

To me, it looks raised.

Thus my question.

---

<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:** [28 April 2020 09:56 UTC](https://discourse.nodered.org/t/the-buttons-in-on-the-edit-screen/25671/4 "2020-04-28T09:56:57Z")

</div>

I understand your perspective.

To me it is darker, therefore pressed.  
To others there is a line underneath, therefore up and not pressed.

It is not easy to serve everyone equally, there is probably a whole field of psychology behind it 😃

---

<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:** [28 April 2020 09:58 UTC](https://discourse.nodered.org/t/the-buttons-in-on-the-edit-screen/25671/5 "2020-04-28T09:58:22Z")

</div>

> [@bakman2](#):
>
> To me it is darker, therefore pressed.  
> To others there is a line underneath, therefore up and not pressed.

And to me, the buttons are all flat and the selected option is highlighted. Nothing to do with being 'higher' or 'lower'.

But yes, the perception is subjective to the individual.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [28 April 2020 09:59 UTC](https://discourse.nodered.org/t/the-buttons-in-on-the-edit-screen/25671/6 "2020-04-28T09:59:19Z")

</div>

(Was eating so now an explanation why I think they are raised.)

Let's look at the screen.

For me _things_ are lite from the top. That is usually where light comes from. Above.

So looking at the button you can see the shadow (near the blue line):

![Screenshot from 2020-04-28 19-26-59](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/4/64727262d6c75a4c07fb568a3649b2cf7a8e7f79.png)

That is below the button. Light coming from the top: It is raised.

Or did I miss something?

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [28 April 2020 10:00 UTC](https://discourse.nodered.org/t/the-buttons-in-on-the-edit-screen/25671/7 "2020-04-28T10:00:41Z")

</div>

> [@knolleary](#):
>
> the buttons are all flat and the selected option is highlighted

Yeah, ok, I can kind of accept that too.

But **highlighted** means (to me) brighter.

The button is darker.

---

<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:** [28 April 2020 14:40 UTC](https://discourse.nodered.org/t/the-buttons-in-on-the-edit-screen/25671/8 "2020-04-28T14:40:05Z")

</div>

It has to be said that I don't think they would pass WAI-AA would they - In fact a quick test shows that they wouldn't due to contrast issues as well as some other detailed issues. Particularly true on a very high-res monitor.

Personally, I'm used to it all so it doesn't especially bother me.

However, for anyone wanting to use Node-RED in a professional setting, this could become an issue. WAI-AA is generally accepted as the minimum standard now, some organisations might even require -AAA. Just to note that this is a **_legal_** requirement in many countries including the UK and EU.

@Trying_to_learn, you could maybe have a go a tweaking the standard theme to improve things and share with us?

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [28 April 2020 22:06 UTC](https://discourse.nodered.org/t/the-buttons-in-on-the-edit-screen/25671/9 "2020-04-28T22:06:16Z")

</div>

I am flattered you asking, but I feel I am unable to do it because I have no idea how to edit the theme.

I could bash out some examples of what I think they should look.

Would that suffice?

What limits are there?  
Resolution (screen)  
Colours  
Size of buttons

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [28 April 2020 23:17 UTC](https://discourse.nodered.org/t/the-buttons-in-on-the-edit-screen/25671/10 "2020-04-28T23:17:27Z")

</div>

Just another observation to do with _highlighting_

As is, the _greyed out_ button is highlighted - thus indicating it is the active one.

![Screenshot from 2020-04-28 19-26-59](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/4/64727262d6c75a4c07fb568a3649b2cf7a8e7f79.png)

![Screenshot from 2020-04-28 19-31-32](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/0/50933be50e36b54c02044385458fff24f01488c7.png)

![Screenshot from 2020-04-29 09-02-34](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/5/7514c47efdefd9d409578ffdfd5b0a831bfb4de4.png)

And I accept that these things are open to personal understanding.

And I don't want to argue for the sake of arguing. There just is/was something which was niggling at me that contradicted the claim that people see things differently. Which isn't my point of contention. Rather the whole scenario.

Today the kink has shown itself.

So, to re-cap:  
In the above pictures, it is the _greyed out_ one which is the active.

And I can't say it is right or wrong. But from a further out perspective, the tabs.......

Here is a picture. I goofed with the colours. **Orange** is the established _scheme_. Putting aside the _underline_ (shadow) of the _button_.

The **grey** is the active selection.

 ![Screenshot from 2020-04-29 09-04-29](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/0/70898d1d4865ace70d05d2b00c8f64b88cfa65b5.png)

Now the tabs. The active tab is `Weather`. Yet it is the opposite colour scheme to the _buttons_.

**grey** are the **inactive** tabs

The active tab has the same colour scheme as used in the other case for the inactive _buttons_.

Am I the first to notice this?  
But that (I hope) is what is constantly getting me for selecting.

## Tabs

the **active tab** is **white**. Inactive tabs are grey.

## Buttons

the **active button** is **grey**. Other buttons are white.

I'll stop here, as I think that is what was/is my grief.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [28 April 2020 23:47 UTC](https://discourse.nodered.org/t/the-buttons-in-on-the-edit-screen/25671/11 "2020-04-28T23:47:46Z")

</div>

This is an example of how the buttons should look to better represent their state:

![button_example](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/b/2b3696b72e735d5ab9517bbbb645f34a967ad75b.png)

I don't think there is any ambiguity here.

I know the colour scheme is not exactly 2020, but that is the idea.

---

<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:** [29 April 2020 00:47 UTC](https://discourse.nodered.org/t/the-buttons-in-on-the-edit-screen/25671/12 "2020-04-29T00:47:24Z")

</div>

Using your browser's developer tools, it is actually quite easy to make dynamic changes to the visuals of the editor:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/0/20a25aa10c15940b1bfb03ca11c8f63adb57dbf3.png)

Use the selection icon ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/9/e9384b0370571aa386944a84642aa6fb21f8d4eb.png) then click the element you want to change.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/a/6adedc4002aa16b96275b22cfb4ccc6996d78a3b.png)

The Elements \> Styles tab shows you all of the styles influencing the selected element & what file they are in. Play around with them to see changes. Sometimes, you may need to add `!important` after a style to boost its priority as in the example shown.

You will note the contrast is show when hovering over an element - the above element is showing sufficient contrast to meet WAI standards, but here is an example from the default settings that shows an element that has insufficient contrast:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/4/54ec5ac97e42ab19ba741e558b803f01d96e71eb.png)

This documentation shows you how to replace the CSS file for the editor:

[https://nodered.org/docs/user-guide/runtime/configuration#editor-themes](https://nodered.org/docs/user-guide/runtime/configuration#editor-themes)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [29 April 2020 00:56 UTC](https://discourse.nodered.org/t/the-buttons-in-on-the-edit-screen/25671/13 "2020-04-29T00:56:32Z")

</div>

Thanks, but I am already overwhelmed enough with `CSS` to start doing that.

It was merely a suggestion and finally - I hope - what was tripping me up all the time with the buttons, tabs and what is meaning what with respect to colours.

---

<div class="post-metadata">

**Author:** ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)\
**Post date:** [29 April 2020 02:27 UTC](https://discourse.nodered.org/t/the-buttons-in-on-the-edit-screen/25671/14 "2020-04-29T02:27:57Z")

</div>

To throw a spanner in the works (because lets face it, that's always fun) have a look at a third party theme such as [https://www.npmjs.com/package/@node-red-contrib-themes/midnight-red](https://www.npmjs.com/package/@node-red-contrib-themes/midnight-red).

If you like it you could just run with it without making any further changes.

Although this doesn't affect the Dashboard I would recommend installing it onto a test instance of NR first, just in case.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [29 April 2020 02:45 UTC](https://discourse.nodered.org/t/the-buttons-in-on-the-edit-screen/25671/15 "2020-04-29T02:45:32Z")

</div>

It kind of looks nice, but I am not seeing details of what the buttons look like, compared to the active/inactive tab colours.

---

<div class="post-metadata">

**Author:** ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)\
**Post date:** [29 April 2020 02:47 UTC](https://discourse.nodered.org/t/the-buttons-in-on-the-edit-screen/25671/16 "2020-04-29T02:47:17Z")

</div>

You will have to install it 😉

But imo it does improve "visibility" in the areas you were referring to.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [29 April 2020 02:48 UTC](https://discourse.nodered.org/t/the-buttons-in-on-the-edit-screen/25671/17 "2020-04-29T02:48:46Z")

</div>

(I gotta ask)

If I don't like it.... I guess it is just the same command but `remove` rather than `install` - yes?

I sort of cringe when I do this because I get to see stuff like this:

```auto
found 34 vulnerabilities (22 low, 1 moderate, 9 high, 2 critical)
  run `npm audit fix` to fix them, or `npm audit` for details
me@me-desktop:~/.node-red$ 

```

Reading the instructions:

```auto
Add the following to the editorTheme section of your settings.js.

editorTheme: {
    page: {
        css: "<HOME>/.node-red/node_modules/@node-red-contrib-themes/midnight-red/theme.css"
    }
}

```

And I then get this:

 ![Screenshot from 2020-04-29 12-52-53](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/b/0b977d85cfdc9fa3b9f550be65a24d4367140e4c.png)

---

<div class="post-metadata">

**Author:** ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)\
**Post date:** [29 April 2020 02:52 UTC](https://discourse.nodered.org/t/the-buttons-in-on-the-edit-screen/25671/18 "2020-04-29T02:52:20Z")

</div>

If you read the link, initially you have to ADD a little text to the settings.js file for it to work. The same text would need to be DELETED if you don't like it. Not a big deal.

Or, you could make a backup copy of the settings.js file FIRST. Probably not a bad idea to do this anyway.

Of course, if you create a separate TEST instance of NR then it won't really matter, as you can blow the whole lot away afterward anyway.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [29 April 2020 03:03 UTC](https://discourse.nodered.org/t/the-buttons-in-on-the-edit-screen/25671/19 "2020-04-29T03:03:08Z")

</div>

> [@Trying\_to\_learn](#):
>
> Add the following to the editorTheme section

What happens if you don't have a `editorTheme` **section** in the settings.js file though?  
The operative word is ADD, not MAKE.

---

<div class="post-metadata">

**Author:** ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)\
**Post date:** [29 April 2020 03:14 UTC](https://discourse.nodered.org/t/the-buttons-in-on-the-edit-screen/25671/20 "2020-04-29T03:14:13Z")

</div>

I just placed the text in at the bottom of the file.

But, please make a backup of the settings.js file first, if you are doing this on one of your prod systems. 🤔

[Next page](https://discourse.nodered.org/t/the-buttons-in-on-the-edit-screen/25671.md?page=2)