More-info color scheme

Configuration Frontend
1

I’m not sure if this has been answered yet but I can’t seem to find the answer. I want to change the state colors in the more-info popup. I want the locked state to be red and unlocked state to be ‘green’ to match my August app color scheme. This is what I have so far but it doesn’t seem to work:

type: custom:button-card
show_icon: false
show_state: false
entity: lock.back_door_lock
name: August Lock
card_mod:
  style: |
    ha-more-info-dialog::shadow ha-more-info-info::shadow {
      --state-lock-locked-color: red !important;
      --state-lock-unlocked-color: green !important;
      .state-value {
        color: var(--state-lock-locked-color) !important;
      }
      .state-value[state="unlocked"] {
        color: var(--state-lock-unlocked-color) !important;
      }
tap_action:
  action: more-info
double_tap_action:
  action: more-info
hold_action:
  action: more-info
2
  1. Customizing more-info popup can be only done by card-mod theme (find a huge main thread for it), not inside some button- or whatever-card.
  2. If you only need to customize colors for the “lock” domain - set this variables in a custom theme:
state-lock-locked-color: red
state-lock-unlocked-color: green

More info in docs.

3

Thanks! I’ll check it out.