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

📱 Mobile Apps
214

That would be cool. I tried something like this editing the Layout JSON:

  "customColors": [
    {
      "template": "switches",
      "bgColor": "linear-gradient(red,yellow)",
      "iconColor": "",
      "state": "on",
      "customIcon": ""
    }
  ],

Unfortunately, that didn't work. This is what happens if you set a custom color in the Templates section:

  "customColors": [
    {
      "template": "switches",
      "bgColor": "rgba(250,242,0,0.87)",
      "iconColor": "",
      "state": "on",
      "customIcon": ""
    }
  ],

This sets the background-color property on the Switch div, which allows color definitions, but not the linear-gradient function.

There is a way to get this to work. Set the background of whatever you're interested in changing to a specific value in the Templates section , then filter on that, since in Templates it sets the background-color in the in-line style attribute. I'm using the default yellow "on" color below:

div.switch[style*="background-color: rgba(250, 242, 0, 0.87)"] { 
  background: linear-gradient(red,yellow);
}

Using that Custom CSS would change any switch that is colored rgba(250, 242, 0, 0.87) (the default "on" color) to a linear gradient background.

5 Likes