I have never really messed with Home Assistant styling before, used some HACS addons to create custom cards but never messed with the CSS before.
Recently began redoing my dashboard and started integrating Bubble Cards - loving it so far.
But in dark mode the default orange for many devices can be a little intense. I have been able to change this individually per button without issue, querying state of entities to color icon/background/button/etc.
Love this.
However, as I was doing this to the 6th button or so I realized it would be much better to do it centrally. As I was looking into doing this I saw that Clooos had just released BETA that had a Modules feature, looked to be just what I’m looking for.
So, to the questions:
-
If something is not specified inside the module profile I create/select is it falling back to the style.css inside the respective folder from bubble-card? Or is it falling back to HA css?
-
Is there some sort of precedence with CSS styles (set in bubble-card or HA) where it prefers anything with !important first, then anything set individually, then anything set in bubble-card, then anything set in HA, etc? Or does it just prefer !important and everything else fights for control if set in 2 places?
-
When trying to change icon color based on state I used the following inside the Default module css(/yaml?):
.bubble-icon {
color: ${state === 'on' ? 'rgb(0, 200, 50)' : ''} !important;
}
This only works if !important is added. It seems that I wouldn’t want !important to be in a template since it would prevent individual customization; is that correct?
What would be overriding this?
-
I see a lot of variables like this: var(–bubble-icon-background-color)
Where are these specified?? If my main goal is to change the color of certain types of devices when on is there some variable I should be changing instead? -
Is there a way to have .bubble-icon change color based on state - but based on device type? (And still have it in module rather than per device?) So orange if heat, blue if fan/AC, light temp if light, green otherwise?
Thanks for any help you can give!