[Example] Color based on multiple states

[MrBearPresident]

type: custom:bubble-card
card_type: button
entity: person.me
button_type: state
show_state: true
styles: |-
  .bubble-button-background {
    background-color: ${
    {
      'home': '#8AD926FF',
      'away': '#1982C4FF',
      'Summer House': '#CDCA3AFF',
      'Parents House': '#6A4C93AA',
    }[state] ?? '#ff0000AA'
  }
card_layout: large

Note: The color code after the ?? is the default value, when the state is not found in the list.

Disclamer: I did not make this, but revised what @j_d posted.

• https://community.home-assistant.io/t/bubble-card-a-minimalist-card-collection-for-home-assistant-with-a-nice-pop-up-touch/609678/1777?u=mrbearpresident

[johndoe0815]

Would something like this also be possible with other elements than color, e.g. icon, and also based on different states than the one of the entity?

Currently I have for example the following custom style code to put a logo into a sub-button based on the media source currently plaing:

${subButtonIcon[0].setAttribute("icon", hass.states['media_player.fire_tv_cube'].attributes.source == 'Disney+' ? 'phu:disney-plus' 
: hass.states['media_player.fire_tv_cube'].attributes.source == 'Netflix' ? 'phu:netflix' 
: hass.states['media_player.fire_tv_cube'].attributes.source == 'Prime Video (FireTV)' ? 'phu:prime-video' 
: hass.states['media_player.fire_tv_cube'].attributes.source == 'Kodi' ? 'mdi:kodi' 
: '')}

[MrBearPresident]

Yes it is possible, by the same basic technique but not in the same way.

  #Place all the DOM changing stuff on the bottom

  ${subButtonIcon[0].setAttribute("icon",
      {
      'Disney': 'phu:disney-plus',
      'Netflix': 'phu:netflix',
      'Prime Video (FireTV)': 'phu:prime-video',
      'Kodi': 'mdi:kodi',
    }[hass.states['media_player.fire_tv_cube'].attributes.source] ?? 'mdi:television'
  )}

[johndoe0815]

Awesome, thanks!
Works perfectly and is much easier to maintain. This is really not intuitive, so good to have such code snippets 👍