# How to change the background of a switch? DB 2

**URL:** <https://discourse.nodered.org/t/how-to-change-the-background-of-a-switch-db-2/92379>\
**Category:** Dashboard\
**Created:** [14 October 2024 15:03 UTC](https://discourse.nodered.org/t/how-to-change-the-background-of-a-switch-db-2/92379 "2024-10-14T15:03:00Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [14 October 2024 15:03 UTC](https://discourse.nodered.org/t/how-to-change-the-background-of-a-switch-db-2/92379/1 "2024-10-14T15:03:00Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/5/4516170207d555288c6ff7a5eafe151db6249306.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [14 October 2024 15:11 UTC](https://discourse.nodered.org/t/how-to-change-the-background-of-a-switch-db-2/92379/2 "2024-10-14T15:11:20Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [14 October 2024 15:25 UTC](https://discourse.nodered.org/t/how-to-change-the-background-of-a-switch-db-2/92379/3 "2024-10-14T15:25:45Z")

</div>

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

```auto
.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));
}

```

---

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [14 October 2024 17:58 UTC](https://discourse.nodered.org/t/how-to-change-the-background-of-a-switch-db-2/92379/4 "2024-10-14T17:58:02Z")

</div>

> [@hotNipi](#):
>
> `switch-with-bgr`

Hi HotNipi,

it works 👍 🙂 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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/c/0c499c9942964508fb24b58551271759c8a3c351.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [14 October 2024 18:02 UTC](https://discourse.nodered.org/t/how-to-change-the-background-of-a-switch-db-2/92379/5 "2024-10-14T18:02:15Z")

</div>

> [@juntiedt](#):
>
> Where can I find the basic style instructions which you used?

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](https://www.browserstack.com/docs/accessibility/website-scanner/test-pages-behind-login-find-css-selectors#:~:text=Right%2Dclick%2C%20and%20select%20',Copy'%20%3E%20'Selector').

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

---

<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:** [13 November 2024 18:02 UTC](https://discourse.nodered.org/t/how-to-change-the-background-of-a-switch-db-2/92379/6 "2024-11-13T18:02:40Z")

</div>

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