Trying to learn how to change an icon’s color for buttons in a card’s footer (or header).
Here is an easy way:
type: entities
title: '--paper-item-icon-color -> .header-footer.footer'
style: |
.header-footer.footer {
--paper-item-icon-color: red;
}
entities:
- sun.sun
- type: divider
footer:
type: buttons
entities:
- entity: sensor.cleargrass_1_co2
- entity: sun.sun
Note that the color is changed only for the 1st entity, for the "sun.sun" we are supposed to change “active” color:
type: entities
title: '--paper-item-icon-XXX-color -> .header-footer.footer'
style: |
.header-footer.footer {
--paper-item-icon-active-color: red;
--paper-item-icon-color: cyan;
}
entities:
- sun.sun
- type: divider
footer:
type: buttons
entities:
- entity: sensor.cleargrass_1_co2
- entity: sun.sun
That was a changing color by using variables.
And when I try to change a color directly for "ha-svg-icon" I am getting a wrong placement:
type: entities
title: color -> ha-svg-icon
style:
.header-footer.footer:
hui-buttons-header-footer:
$:
hui-buttons-base:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
}
entities:
- sun.sun
- type: divider
footer:
type: buttons
entities:
- entity: sun.sun
- entity: sun.sun
The same result I get when changing the "--paper-item-icon-color" variable for some particular item:
type: entities
title: '--paper-item-icon-color -> div'
card_mod:
style:
.header-footer.footer hui-buttons-header-footer$hui-buttons-base$: |
div:nth-child(1) {
--paper-item-icon-color: red;
}
entities:
- sun.sun
- type: divider
footer:
type: buttons
entities:
- entity: sensor.cleargrass_1_co2
- entity: sensor.cleargrass_1_co2
OK, this is NOT critical - but I wonder why this misplacement happens after applying a style.