please help me out with this probably simplest thing: how to change the badge color (using a templated color, not the theme variables) on a core type: tile
card. These 2 mods work fine, but are not yet what I am looking for
card_mod:
style: |
ha-card {
background-color: {{states('sensor.xxx_background_color')}};
}
.badge {
--tile-badge-icon-color: {{states('sensor.xxx_icon_color')}};
}
using inspector I found the obvious --tile-badge-background-color
on ha-tile-badge
but I cant make that happen if I add it to
ha-tile-badge {
--tile-badge-background-color: {{states('sensor.xxx_background_color')}};
}
or even the .badge
.badge {
--tile-badge-icon-color: black;
--tile-badge-background-color: green;
/*background-color: black*/
}
using background-color
in .badge
has an effect, but the wrong effect. as it does color the complete background of the badge, and not the badge itself…
I did manage to set the border of the image and filter it based on state:
.icon-container {
border: solid {{states('sensor.xxx_background_color')}} 4px;
border-radius: 50px;
}
ha-tile-image {
filter: {{'grayscale(1)' if not is_state(config.entity,'home') else 'none'}};
}
But, the color of the badge background remains to be found…
please have a look?
update
heck, I keep forgetting !important
…
.badge {
--tile-badge-icon-color: black;
--tile-badge-background-color: green !important;
/*background-color: black*/
}
makes it work, and overrides the theme colors.
one challenge left, why the filter is applied in Chrome, but not in Safari…