Colored checkbox:
NOTE:
Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3).
Track with static color, colored track’s border:
- entity: input_boolean.test_boolean
name: 'colored back (static), colored border'
style:
hui-generic-entity-row:
ha-entity-toggle:
$:
ha-switch:
$: |
.mdc-switch .mdc-switch__track {
background-color: yellow !important;
border-color: green !important;
}
Track with conditional color, colored track’s border:
- entity: input_boolean.test_boolean
name: 'colored back (conditional), colored border'
style:
hui-generic-entity-row:
ha-entity-toggle:
$:
ha-switch:
$: |
.mdc-switch .mdc-switch__track {
border-color: green !important;
}
.: |
ha-switch {
--switch-unchecked-track-color: yellow;
--switch-checked-track-color: red;
}
Thumb with conditional color:
- entity: input_boolean.test_boolean
name: colored button (conditional)
style:
hui-generic-entity-row:
ha-entity-toggle:
$: |
ha-switch {
--switch-unchecked-button-color: yellow;
--switch-checked-button-color: red;
}
More examples are described here.