home-assistant-custom-ui: Some of the new CSS variables (0.51) not working with theme per-entity

Well, one solution could be to do it like this ;

badgeMode: function (hass, stateObj, badgeBorderColor) {
  (...)
  Polymer.dom(this).lastChild.style.setProperty('--ha-state-label-badge-margin-bottom', '0');
  if (badgeBorderColor == 'red') {
    Polymer.dom(this).lastChild.style.setProperty('--label-badge-red', 'var(--label-badge-red)');
  } else if (badgeBorderColor == 'blue') {
    Polymer.dom(this).lastChild.style.setProperty('--label-badge-red', 'var(--label-badge-blue)');
  } else if (badgeBorderColor == 'green') {
    Polymer.dom(this).lastChild.style.setProperty('--label-badge-red', 'var(--label-badge-green)');
  } else if (badgeBorderColor == 'yellow') {
    Polymer.dom(this).lastChild.style.setProperty('--label-badge-red', 'var(--label-badge-yellow)');
  } else if (badgeBorderColor == 'grey') {
    Polymer.dom(this).lastChild.style.setProperty('--label-badge-red', 'var(--label-badge-grey)');
  }
  (...)
}

… and …

inputChanged: function (hass, inDialog, stateObj) {
  (...)
  domain = window.hassUtil.computeDomain(stateObj);
  if (!inDialog && domain === 'group' && stateObj.attributes.state_card_mode === 'badges') {
    this.badgeMode(hass, stateObj, 'red');
    return;
  } else if (!inDialog && domain === 'group' && stateObj.attributes.state_card_mode === 'badges_red') {
    this.badgeMode(hass, stateObj, 'red');
    return;
  } else if (!inDialog && domain === 'group' && stateObj.attributes.state_card_mode === 'badges_blue') {
    this.badgeMode(hass, stateObj, 'blue');
    return;
  } else if (!inDialog && domain === 'group' && stateObj.attributes.state_card_mode === 'badges_green') {
    this.badgeMode(hass, stateObj, 'green');
    return;
  } else if (!inDialog && domain === 'group' && stateObj.attributes.state_card_mode === 'badges_yellow') {
    this.badgeMode(hass, stateObj, 'yellow');
    return;
  } else if (!inDialog && domain === 'group' && stateObj.attributes.state_card_mode === 'badges_grey') {
    this.badgeMode(hass, stateObj, 'grey');
    return;
  }
  (...)
}

And then the same thing could also work for the background colours…

Sure it’s maybe not the most elegant solution, but hey it works… You could do it more elegantly with a glob instead I guess. Anyway following the rules above you can now customize with state_card_mode: badges but also with state_card_mode: badges_blue etc.

Which brings me to another question I was wondering about… Why limit the badges option to groups only (necessitating the complicated put-your-inner-groups-in-outer-groups thing)? Can’t you remove the && domain === 'group' part? (I tried it quickly but doesn’t seem to work for some reason 😒)