# D2 v-switch colour when off?

**URL:** <https://discourse.nodered.org/t/d2-v-switch-colour-when-off/87494>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [25 April 2024 15:30 UTC](https://discourse.nodered.org/t/d2-v-switch-colour-when-off/87494 "2024-04-25T15:30:57Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [25 April 2024 15:30 UTC](https://discourse.nodered.org/t/d2-v-switch-colour-when-off/87494/1 "2024-04-25T15:30:57Z")

</div>

I am using a v-switch in a ui-template and want to specify the colour when the switch is in the Off state. Reading the docs, and google, suggested to me that `base-color` might do the job, though I am not sure, and can't find an example of using it. I can't get `base-color` to make any difference at all. I have just this in the template

```auto
<template>
    <div>
        <v-switch color="blue" base-color="black">
        </switch>
    </div>
</template>

```

Using NR 4.0.0 Beta 2, Dashboard 1.7.1

```auto
[{"id":"3481af21e0e20c45","type":"ui-template","z":"997da33a0beedade","group":"4f87bd59a15b847e","name":"switch base-color test","order":0,"width":0,"height":0,"head":"","format":"<template>\n <div>\n <v-switch color=\"blue\" base-color=\"black\">\n </switch>\n </div>\n</template>\n\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":470,"y":5200,"wires":[[]]},{"id":"4f87bd59a15b847e","type":"ui-group","name":"test","page":"ebe9054315fb0b03","width":"6","height":"1","order":-1,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"ebe9054315fb0b03","type":"ui-page","name":"Test","ui":"ID-BASE-1","path":"/test","icon":"home","layout":"grid","theme":"f9b6670b127dc219","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard"},{"id":"f9b6670b127dc219","type":"ui-theme","name":"FlowForge Theme","colors":{"surface":"#152a47","primary":"#005aff","bgPage":"#ffffff","groupBg":"#ffffff","groupOutline":"#cc3e3e"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

---

<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:** [25 April 2024 16:03 UTC](https://discourse.nodered.org/t/d2-v-switch-colour-when-off/87494/2 "2024-04-25T16:03:35Z")

</div>

> [@Colin](#):
>
> Reading the docs, and google, suggested to me that `base-color` might do the job

[https://vuetifyjs.com/en/api/v-switch/#props-base-color](https://vuetifyjs.com/en/api/v-switch/#props-base-color)

> Sets the color of the input when it is not focused

but then the playground seems to do what you want!

[https://play.vuetifyjs.com/#eNq1j0EKAjEMRa9Ssla7lzrgGVxaF50adCC2Ie2MC/HudjIKegA3Ie/BD/nHBxSJds+8mUaELbiKN6ZQsfPJGDetA7OuCjGnGoaE8lYqy32o8Woo9Eg7DwdFDyZmytKE4LlRHwq2/KIugpg8dM5+4v86OIvfr2ezlHL2qyw8V2kk0nF6AVTpXRQ=](https://play.vuetifyjs.com/#eNq1j0EKAjEMRa9Ssla7lzrgGVxaF50adCC2Ie2MC/HudjIKegA3Ie/BD/nHBxSJds+8mUaELbiKN6ZQsfPJGDetA7OuCjGnGoaE8lYqy32o8Woo9Eg7DwdFDyZmytKE4LlRHwq2/KIugpg8dM5+4v86OIvfr2ezlHL2qyw8V2kk0nF6AVTpXRQ=)

🤷

---

<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:** [25 April 2024 16:07 UTC](https://discourse.nodered.org/t/d2-v-switch-colour-when-off/87494/3 "2024-04-25T16:07:53Z")

</div>

Actually, when selecting the playground version 3.5.14 or lower, it does not work as expected.

In short, update to DB2 v1.8.0 released today (it uses vuetify 3.5.17)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [25 April 2024 16:11 UTC](https://discourse.nodered.org/t/d2-v-switch-colour-when-off/87494/4 "2024-04-25T16:11:31Z")

</div>

> [@Steve-Mcl](#):
>
> Sets the color of the input when it is not focused

Not focused does not convey to me that the switch is in the off condition, though other references I found did suggest that.

> [@Steve-Mcl](#):
>
> playground version 3.5.14 or lower, it does not work as expected.
> 
> In short, update to DB2 v1.8.0 released today (it uses vuetify 3.5.17)

Excellent, thanks, though it isn't actually available for install via Manage Palette. Not for me at least. I can wait for it to work its way though the system.

---

<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:** [25 April 2024 16:12 UTC](https://discourse.nodered.org/t/d2-v-switch-colour-when-off/87494/5 "2024-04-25T16:12:55Z")

</div>

Looks like it wasnt refreshed on the flows site.

done now.

give it ~30 mins

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [25 April 2024 21:03 UTC](https://discourse.nodered.org/t/d2-v-switch-colour-when-off/87494/6 "2024-04-25T21:03:21Z")

</div>

All working now, including base-color.

---

<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:** [9 May 2024 21:03 UTC](https://discourse.nodered.org/t/d2-v-switch-colour-when-off/87494/7 "2024-05-09T21:03:22Z")

</div>

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