The Noob's (in)complete guide to CSS for Hubitat

📱 Mobile Apps
335

Add the following in the layout section for your button

 "customeColors": [
        {
          "template": "switches",
          "bgColor": "rgb (255,4,4)",
          "iconColor": "rgb(255,255,255)",
          "state": "on"
        }
      ]

make sure to remove the template it is stating for that switch.

I should add, back up your original configuration prior to making the change in case something goes wrong.

Update: the above change will apply to all switches. To modify just one switch, the following will work.

This basically targets one switch and changes the back ground color for off and on, in this case the background when off will be blue and when on it will be red, in addition it changes the flip icon to black when the switch is on.


#tile-14 {
    background-color: rgba(0,0,255,1) !important;
}

#tile-14 .on {
    he-switch_2_flipped; color: black;
}

#tile-14[style*="background-color"] {
    background-color: rgba(255, 0, 0, 1)!important;
}

OFF
image

ON
image

3 Likes