Made incredible progress, but hit a snag... color change on switch

General
1

I am an ol' guy, over 70 and took to NodeRed V2.0 about a week ago. I have developed a functional link up of MQTT to Node Red V2.0 to and from influxDB V2.0 Running over 80 data points into multiple (8) multi line graphs, and 50 LED indicators and Text box numerical values. What phenomenal software!

Now it is time to control my system in the opposite direction and I am totally stumped by how to change the button color of the switch in the off and on conditions.

I have worked on this for 8 hours with AI to no solution, and have searched you site, but could not find V2.0 solutions. In the code below #1 works, 2 and 3 do not change the white and teal colors that are default. This code is in a template node.

If one of you guru's could help this ol' guy or point me in the right direction, I sure would appreciate it.
All the best,
Dave

//Works!
// 1.Change  the background selection track when checked/unchecked 
.custom-switch .v-selection-control__wrapper .v-switch__track {
background-color: #505050 !important;  //This changed the track of the button OK
opacity: 0.6;
}

//Does NOT work
// 2. Target the circle ONLY when the switch is OFF 
.custom-switch .v-selection-control:not(.v-selection-control--selected) .v-switch__thumb {
background-color: #00ffcc !important;
}

//Does NOT work
// 3. Target the circle ONLY when the switch is ON //
.custom-switch .v-selection-control--selected .v-switch__thumb {
background-color: #ff0055 !important;
}
2

Hi Dave & welcome to the forum.

I am assuming you mean Node-RED Dashboard v2 (node-red v2 is very very old and it is strongly recommended you update to Node-RED v5)

Regarding your issue:

FYI, dashboard 2 used vuetify controls and their website has a wealth of information and a useful playground where you can test things out.

Sometimes it is easier to determine the variable used for the thing you are trying to affect and simply update that instead. e.g:

  .custom-switch .v-switch__thumb {
    --v-theme-surface-bright: 255, 120, 210 !important; /* off colour */
    --v-theme-primary: 255, 0, 80 !important; /* on colour */
  }

See this working vuetify playground demo:

Bonus:

You can also affect the track like this

  .custom-switch .v-switch__track {
    --v-theme-surface-variant: 200, 200, 200 !important; /* off track */
    --v-theme-primary: 255, 0, 80 !important; /* on track */
  }

Note

.v-selection-control--selected is not a class on the vuetify switch (at guess an LLM hallucinated this?)

image
image1100×237 21.6 KB

If you open your browsers console, you can test your selectors to make sure they target the correct thing using $("<the selector>") e.g. $('.v-selection-control--selected') or $('.custom-switch .v-switch__thumb') (if $("xxx") errors, try $$("xxx"))

3

Steve, you did not just give me a fish, you are teaching me to fish! I love learning!

  1. Yes, using Node Red Dashboard 2.0 and Node Red V5.0.0 running in a container on a Synology NAS

  2. I never knew about vuetify controls! Thank you for that, and the web site... so much more to learn... but that is good

  3. Thank you for not only the changes, but the link to the Vuetify Playground with the demo

4)"If you open your browsers console".. I can tell that is in vuetify, but I don't know exactly where? The playground.? A subset of the playground? I could not replicate it.

5)When I pasted the code in the example of #4 above into a template node, it did create a switch but without (it seems to me) all the capability that is in the switch node. It did also change the character of the switch I created with a switch node. So I had 2 switches on my group.

  1. If I only put the following in a template node, it changed my switch, but used up space in the group
<style>
    /* Target the circle ONLY */
    .custom-switch .v-switch__thumb {
        --v-theme-surface-bright: 100, 120, 210 !important;
        /* off colour */
        --v-theme-primary: 255, 0, 80 !important;
        /* on colour */
    }
</style>

Am I putting things in the wrong space/node/etc?

Not having my colleagues around any more, when I hit these simple roadblocks...you don't even know what to search for to get the answer,,, as you know, and I am learning, the LLM is overconfident, and when it gets lost it goes forever down a rat hole.

Thank you for helping this ol' guy!
All the best,
Dave

4

Set the template to type CSS.

5

Colin, thank you sir! Works... another step forward and more understanding.

Looks like I needed to remove the

<style> tag
but keep the content
</style> tag

For any other newbs/learners in the future, the NodeRed "manual" I found at:
(Toggle Switch ui-switch | Node-RED Dashboard 2.0)

Also this restriction on comments bit me! (Added for others that are starting out)

1. **Function Nodes**: You can use `//` for single-line comments or `/* */` for multi-line comments inside your JavaScript code.
2. **JSON/Template Nodes**: If you are working inside JSON fields or standard template nodes, `//` comments are **not allowed** because standard JSON does not support them.

Thanks and all the best,
Dave