How to change the background of a switch? DB 2

Dashboard
1

As you can see below, I want to change the background of the switch (not the little switch symbol in the right corner but the total switch background) to the same color as the buttons below.
Help very much appreciated.

image
image459Ă—532 10.5 KB

2

I assume you mean the whole widget (e.g. around the title "TV an aus" and the (* ) button)?

What is it, a ui-template?

Does the node have a class field? (the place in node-red where you set up the widget)

3

The class o add to the switch is switch-with-bgr
And styles for it:

.switch-with-bgr .nrdb-ui-switch--row-spread{
    background: rgb(var(--v-theme-primary));
    border-radius: 4px;
    padding-inline: 12px;
    color:rgb(var(--v-theme-on-primary));
}
1 Like
4

Hi HotNipi,

it works :+1: :slightly_smiling_face: many thanks for the fast response!

now the text "TV an aus" needs to be clear white.

Is there another style instruction for switch text?

Where can I find the basic style instructions which you used?

image

5

If you inspect the text you will see what classes it has - you can use them to construct any CSS you need.

Here is a basic how to: How to find a CSS selector? | BrowserStack Documentation.

But rather than setting it to white - inspect the white text on the button and apply whatever color value that has (it might come from the theme & may not actually be white)