change background color on state based

[poelleke]

Goal

is it possible to change the background color on the select card?
like when i change my house mode to evening the background color change to red and when i select morning it changed to green.

Source Yaml

i have this on a other card a mushroom select card:

    card_mod:
      style: |
        mushroom-shape-icon {
          {% if states(config.entity) == 'Thuis' %}
            --card-mod-icon: mdi:home-account;
            --icon-color: rgb(var(--rgb-green)) !important;
            --shape-color: rgba(var(--rgb-green), 0.2) !important;
          {% elif states(config.entity) == 'Weg' %}
            --card-mod-icon: mdi:home-export-outline;
            --icon-color: rgb(var(--rgb-red)) !important;
            --shape-color: rgba(var(--rgb-red), 0.2) !important;
          {% elif states(config.entity) == 'Slaap' %}
            --card-mod-icon: mdi:sleep;
            --icon-color: rgb(var(--rgb-blue)) !important;
            --shape-color: rgba(var(--rgb-blue), 0.2) !important;
          {% elif states(config.entity) == 'Gast' %}
            --card-mod-icon: mdi:home-heart;
            --icon-color: rgb(var(--rgb-purple)) !important;
            --shape-color: rgba(var(--rgb-purple), 0.2) !important;
          {% elif states(config.entity) == 'Uit' %}
            --card-mod-icon: mdi:home-off;
            --icon-color: rgb(var(--rgb-gary)) !important;
            --shape-color: rgba(var(--rgb-gray), 0.2) !important;
          {% else %}
            --card-mod-icon: mdi:home-alert;
            --icon-color: rgb(var(--rgb-red)) !important;
            --shape-color: rgba(var(--rgb-red), 0.2);
          {% endif %}
        }

Which step did you already try?

No response

Problem

No response

Read the documentation

• I have read the documentation

[poelleke]

found it. thanks to MrBearPresident he posted something similar.
#929

.bubble-container {
background-color: ${
{
'Thuis': '#8AD926FF',
'Weg': '#1982C4FF',
'Gast': '#CDCA3AFF',
'Vakantie': '#6A4C93AA',
}[state] ?? '#ff0000AA'
};
}