Mushroom Cards - Build a beautiful dashboard easily 🍄

Did you find a solution yet? I have the same feeling :slight_smile:

Top is Mushroom, bottom is Tile
Scherm­afbeelding 2023-09-09 om 00.10.17

Any idea what the standard Tile font / icon settings are?

You can do it with card mod.

With shape background:
SmartSelect_20230909_001315_Home Assistant

Code
card_mod:
  style: |
    ha-card {
      width: fit-content;
    }

Without shape background:
SmartSelect_20230909_001702_Home Assistant

Code
card_mod:
  style: |
    ha-card {
      width: fit-content;
    }
    mushroom-shape-icon {
      --shape-color: none !important;
    }

No card background:
SmartSelect_20230909_005600_Home Assistant

Code
card_mod:
  style: |
    ha-card {
      width: fit-content;
      background: none;
      border: none !important;
      box-shadow: none !important;
    }

No card background or shape background:
SmartSelect_20230909_005831_Home Assistant

Code
card_mod:
  style: |
    mushroom-shape-icon {
      --shape-color: none !important;
    }
    ha-card {
      width: fit-content;
      background: none;
      border: none !important;
      box-shadow: none !important;
    }

And last one, no card background, shape background, or badge background:
SmartSelect_20230909_010059_Home Assistant

Code
card_mod:
  style: |
    mushroom-shape-icon {
      --shape-color: none !important;
    }
    ha-card {
      width: fit-content;
      background: none;
      border: none !important;
      box-shadow: none !important;
    }
    mushroom-badge-icon {
      --main-color: none !important;
    }
7 Likes

Not a different font. Different font weight and color.

You can change the font weight and color of the tile card like this (to match mushroom default):

Tile to Match Mushroom
card_mod:
  style:
    ha-tile-info$: |
      .primary {
        font-weight: bold !important;
        color: rgba(var(--rgb-primary-text-color), 1) !important;
      }
      .secondary {
        font-weight: bold !important;
        color: rgba(var(--rgb-secondary-text-color), 1) !important;
      }

And to do the opposite:

Mushroom Match Tile
card_mod:
  style:
    mushroom-state-info$: |
      .primary {
        font-weight: 400 !important;
        color: rgba(var(--rgb-primary-text-color), 1) !important;
      }
      .secondary {
        font-weight: 400 !important;
        color: rgba(var(--rgb-primary-text-color), 1) !important;
      }

For the icons the only real difference tends to be the icon size and color as well. Both can be changed like this (note that i have chosen blue as an example, can be any color, also please note any 0.2 or 1 in the rgba color, it shows the transparency of the color so it is important!):

Tile Match Mushroom
card_mod:
  style:
    ha-tile-icon$: |
      :host {
        --mdc-icon-size: 20px !important;
      }
      ha-icon {
        color: rgba(20, 160, 255, 1) !important;
      }
      .shape::before {
        background-color: rgba(20, 160, 255, 1) !important;
      }

And the opposite:

Mushroom Match Tile
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: rgba(var(--rgb-blue), 0.2) !important;
      }
    .: |
      ha-state-icon {
        color: rgba(var(--rgb-blue), 1);
        --icon-symbol-size: 25px;
      }

EDIT: just to add if the modification for the icon doesnt work for the tile card try and replace ha-icon with ha-svg-icon unfortunately the tiles use a mix depending on whether the icon is one that changes based on the state or not (so open or closed blinds etc.)

8 Likes

I don’t have this typo in my yaml file. So still have the issue.

I’m using the Chips card to show my frigate snapshots. I would like to know when one of the cameras has a person in view using a binary sensor for person occupancy. My problem is I can’t seem to figure out card_mod with the Chips card at this point. I’ve looked all over, and here’s what I have so far. Can someone take a look and let me know where I went wrong? TIA!

image

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: camera.driveway_camera_person
    content_info: none
    use_entity_picture: true
  - type: entity
    entity: camera.north_camera_person
    content_info: none
    use_entity_picture: true
  - type: entity
    entity: camera.front_door_camera_person
    content_info: none
    use_entity_picture: true
  - type: entity
    entity: camera.backyard_camera_person
    content_info: none
    use_entity_picture: true
  - type: entity
    entity: camera.front_doorbell_person
    content_info: none
    use_entity_picture: true
  - type: entity
    entity: camera.foyer_camera_person
    content_info: none
    use_entity_picture: true
  - type: entity
    entity: camera.garage_camera_person
    content_info: none
    use_entity_picture: true
  - type: entity
    entity: camera.kitchen_camera_person
    content_info: none
    use_entity_picture: true
  - type: entity
    entity: camera.family_room_camera_person
    content_info: none
    use_entity_picture: true
alignment: center
card_mod:
  style:
    div:
      mushroom-template-chip:nth-child(6):
        $:
          mushroom-chip: |
            ha-icon {
              {% if is_state('binary_sensor.foyer_camera_person_occupancy', 'on') %}  
              animation: rotation 1s linear infinite;
              {% endif %}
            }
            @keyframes rotation {
              0% {
                transform: rotate(0deg);
              }
              100% {
                transform: rotate(360deg);
              }
            }
2 Likes

Take a look at my guide and then the chip section.

Essentially any changes to the chip itself, background, size, border, shadow, etc. Can be applied to the chip directly. But anything that needs to target something inside of the chip needs to be targeted from the main chip card and then drilled down to the appropriate chip.

Edit: also if you know what the path is to your camera snapshots you can use a template chip instead and then you could just have it change the icon when its detected motion or something, like this maybe?

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: camera.demo_camera
    picture: |-
      {% if states('binary_sensor.front_door_motion') == 'on' %}
      some image that will show that motion is detected.
      {% else %}
      local/frontdoorcamera/tmp/camera.png
      {% endif %}

You are a hero. Many thanks :pray:
Any idea what to putt instead of the --rgb-blue to just use the standard mushroom colors? I used --state-icon-color, but that doesn’t work.

Dont think it is possible. The state icon color mushroom uses is parsed at card level i believe so it wont be exposed to the tile card.

I would just change it manually with some colors that look nice to you.

card_mod:
  style:
    ha-tile-icon$: |
      :host {
        --mdc-icon-size: 20px !important;
      }
      ha-icon {
        color: rgba(20, 160, 255, 1) !important;
      }
      .shape::before {
        background-color: rgba(20, 160, 255, 1) !important;
      }

Hi, has the recent Home Assistant update broken the cards for anyone else?

All my cards showing as “Custom Element Doesn’t Exist”.

Hi, I’m fine. Try emptying everything or logging out and logging in.

Wow, those guides are great. I have been searching through different incomplete examples and I figured it out in 5 minutes after looking at this. Thanks!

1 Like

Estou começando a elaborar algumas coisas sobre o Natal aqui no meu Dashboard, porém esatou com dificuldades para fazer um “Chip” que aparece quando liga minha Árvore de Natal com os dizeres “Feliz Natal!”

I tried several things, but I can only leave it this way;

Animação

Can anybody help me?

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:pine-tree
    icon_color: green
  - type: template
    icon: mdi:star-four-points
    icon_color: yellow
  - type: template
    icon: mdi:grain
    icon_color: red
  - type: template
    icon: mdi:gift
    icon_color: red
card_mod:
  style:
    mushroom-template-chip:nth-child(2)$: |
      .shape {
        --shape-color: none;
      }
      ha-card {
        width: 66px;
        top: 0px;
      }
      ha-state-icon {
        animation: star 8s ease infinite alternate;
      }
      @keyframes star {
        0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
        50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
      }
    mushroom-template-chip:nth-child(3)$: |
      .shape {
        --shape-color: none;
      }
      ha-card {
        width: 66px;
        top: -132px;
      }
      ha-state-icon {
        animation: flash 2s steps(1) infinite, lights 2s infinite;
        clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
      }
      @keyframes flash {
        50% { transform: rotateY(180deg); }
      }
      @keyframes lights {
        0%, 100% {color: rgb(var(--rgb-red)); }
        6.25% { color: rgb(var(--rgb-deep-orange)); }
        12.5% { color: rgb(var(--rgb-orange)); }
        18.75% { color: rgb(var(--rgb-amber)); }
        25% { color: rgb(var(--rgb-yellow)); }
        31.25% { color: rgb(var(--rgb-lime)); }
        37.5% { color: rgb(var(--rgb-light-green)); }
        43.75% { color: rgb(var(--rgb-green)); }
        50% { color: rgb(var(--rgb-teal)); }
        56.25% { color: rgb(var(--rgb-cyan)); }
        62.5% { color: rgb(var(--rgb-light-blue)); }
        68.75% { color: rgb(var(--rgb-blue)); }
        75% { color: rgb(var(--rgb-indigo)); }
        81.25% { color: rgb(var(--rgb-deep-purple)); }
        87.5% { color: rgb(var(--rgb-purple)); }
        93.75% { color: rgb(var(--rgb-pink)); }
      }
    mushroom-template-chip:nth-child(4)$: |
      .shape {
        --shape-color: none;
        --icon-size: 18px;
        top: 18px;
        left: 18px;
      }
      ha-card {
        width: 66px;
        top: -198px;
      }
      ha-state-icon {
        animation: surprise 4s ease infinite;
      }
      @keyframes surprise {
        0%, 20%, 100% { transform: translateY(0); }
        2.5% { transform: translateY(-2px) rotate(-27deg); }
        5% { transform: translateY(-2px) rotate(21deg); }
        7.5% { transform: translateY(-2px) rotate(-15deg); }
        10% { transform: translateY(-2px) rotate(9deg); }
        12.5% { transform: translateY(0); }
        15% { transform: translateY(-1.2px) }
      }

1 Like

Firstly please only use english on this forum. Makes it very hard for people to search for solutions if they would have to search in many different languages.

To move the chip itself you need to target the chip rather then the chip container drilled down.

Try like this:
SmartSelect_20230909_225053_Home Assistant

Code
type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:pine-tree
    icon_color: green
  - type: template
    icon: mdi:star-four-points
    icon_color: yellow
    card_mod:
      style: |
        ha-card {
          position: absolute;
          left: 0px;
          top: 1px;
          background: none !important;
          box-shadow: none !important;
          border: none !important;
        }
  - type: template
    icon: mdi:grain
    icon_color: red
    card_mod:
      style: |
        ha-card {
          position: absolute;
          left: 0px;
          top: 0px;
          background: none !important;
          box-shadow: none !important;
          border: none !important;
        }
  - type: template
    icon: mdi:gift
    icon_color: red
    card_mod:
      style: |
        ha-card {
          position: absolute;
          left: 0px;
          top: 4px;
          background: none !important;
          box-shadow: none !important;
          border: none !important;
        }
card_mod:
  style:
    mushroom-template-chip:nth-child(2)$: |
      ha-state-icon {
        animation: star 8s ease infinite alternate;
      }
      @keyframes star {
        0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
        50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
      }
    mushroom-template-chip:nth-child(3)$: |
      ha-state-icon {
        animation: flash 2s steps(1) infinite, lights 2s infinite;
        clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
      }
      @keyframes flash {
        50% { transform: rotateY(180deg); }
      }
      @keyframes lights {
        0%, 100% {color: rgb(var(--rgb-red)); }
        6.25% { color: rgb(var(--rgb-deep-orange)); }
        12.5% { color: rgb(var(--rgb-orange)); }
        18.75% { color: rgb(var(--rgb-amber)); }
        25% { color: rgb(var(--rgb-yellow)); }
        31.25% { color: rgb(var(--rgb-lime)); }
        37.5% { color: rgb(var(--rgb-light-green)); }
        43.75% { color: rgb(var(--rgb-green)); }
        50% { color: rgb(var(--rgb-teal)); }
        56.25% { color: rgb(var(--rgb-cyan)); }
        62.5% { color: rgb(var(--rgb-light-blue)); }
        68.75% { color: rgb(var(--rgb-blue)); }
        75% { color: rgb(var(--rgb-indigo)); }
        81.25% { color: rgb(var(--rgb-deep-purple)); }
        87.5% { color: rgb(var(--rgb-purple)); }
        93.75% { color: rgb(var(--rgb-pink)); }
      }
    mushroom-template-chip:nth-child(4)$: |
      ha-state-icon {
        --chip-icon-size: 10px;
        animation: surprise 4s ease infinite;
      }
      @keyframes surprise {
        0%, 20%, 100% { transform: translateY(0); }
        2.5% { transform: translateY(-2px) rotate(-27deg); }
        5% { transform: translateY(-2px) rotate(21deg); }
        7.5% { transform: translateY(-2px) rotate(-15deg); }
        10% { transform: translateY(-2px) rotate(9deg); }
        12.5% { transform: translateY(0); }
        15% { transform: translateY(-1.2px) }
      }

If this doesnt work perfectly for you fiddle with the top: number :slight_smile:

2 Likes

Is there a way to avoid the shadow and border of sub-cards from being visible when the page loads?

mushroom-card

Card configuration:

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    style: |
      ha-card {
        --ha-card-box-shadow: none;
        border: none;
        background: none;
      }
    icon: |-
      {% set state = states(entity) %}
      {% if state == "clear-night" %}
        mdi:weather-night
      {% elif state == "cloudy" %}
        mdi:weather-cloudy
      {% elif state == "fog" %}
        mdi:weather-fog
      {% elif state == "hail" %}
        mdi:weather-hail
      {% elif state == "lightning" %}
        mdi:weather-lightning
      {% elif state == "lightning-rainy" %}
        mdi:weather-lightning-rainy
      {% elif state == "partlycloudy" %}
        mdi:weather-partly-cloudy
      {% elif state == "pouring" %}
        mdi:weather-pouring
      {% elif state == "rainy" %}
        mdi:weather-rainy
      {% elif state == "snowy" %}
        mdi:weather-snowy
      {% elif state == "snowy-rainy" %}
        mdi:weather-snowy-rainy
      {% elif state == "sunny" %}
        mdi:weather-sunny
      {% elif state == "windy" %}
        mdi:weather-windy
      {% elif state == "windy-variant" %}
        mdi:weather-windy-variant
      {% else %}
        mdi:weather-cloudy-alert
      {% endif %}
    icon_color: |-
      {% set state = states(entity) %}
      {% if state == "clear-night" %}
        orange
      {% elif state == "cloudy" %}
        grey
      {% elif state == "fog" %}
        grey
      {% elif state == "lightning" %}
        yellow
      {% elif state == "lightning-rainy" %}
        blue
      {% elif state == "partlycloudy" %}
        amber
      {% elif state == "sunny" %}
        amber
      {% elif state == "pouring" %}
        blue
      {% elif state == "rainy" %}
        blue
      {% elif state == "snowy" %}
        black
      {% elif state == "snowy-rainy" %}
        black
      {% elif state == "windy" %}
        green
      {% elif state == "windy-variant" %}
        green
      {% else %}
        default
      {% endif %}
    primary: Pogoda
    secondary: |-
      {% set condition_map = {
               "clear-night": "pogodna noc",
               "cloudy": "pochmurno",
               "exceptional": "warunki nadzwyczajne",
               "fog": "mgła",
               "hail": "grad",
               "lightning": "wyładowania atmosferyczne",
               "lightning-rainy": "burza",
               "partlycloudy": "częściowe zachmurzenie",
               "pouring": "ulewa",
               "rainy": "deszczowo",
               "snowy": "opady śniegu",
               "snowy-rainy": "deszcz ze śniegiem",
               "sunny": "słonecznie",
               "windy": "wietrznie",
               "windy-variant": "wietrznie"
             }
      %}
      {{ condition_map.get(states(entity)) }}
    tap_action:
      action: navigate
      navigation_path: /lovelace/climate
    entity: weather.home
  - type: custom:stack-in-card
    style: |
      ha-card {
        --ha-card-box-shadow: none;
        border: none;
        background: none;
      }
    cards:
      - type: custom:mushroom-chips-card
        alignment: end
        style: |
          div.chip-container {
            margin-bottom: -14px;
            --chip-border-width: 0px;
            --chip-background: none;
          }
        chips:
          - type: entity
            entity: sensor.temperature_outdoor
            icon_color: amber
          - type: entity
            entity: sensor.humidity_outdoor
            icon_color: blue
      - type: custom:mushroom-chips-card
        alignment: end
        style: |
          div.chip-container {
            margin-bottom: -14px;
            --chip-border-width: 0px;
            --chip-background: none;
          }
        chips:
          - type: entity
            entity: sensor.pressure_outdoor
            icon_color: green
          - type: entity
            entity: sensor.home_forecast_precipitation_probability
            icon_color: purple

No. Its just how css is loaded when modifications are made like stack in cards and card mod. You are modifying the page after it loads. Only way to make it less obvious is a faster connection to your ha instance so the modifications load faster.

I thought so :frowning:

The network connection between the client and the HA server is gigabit ethernet, so there is not much room for improvement.

Mine is not gigabit and between client and instance on my pc which is wired i dont get this but on my phone i do because of the higher latency.

Maybe try and ping your ha instance from the client and look at your latency instead of the bandwidth.

Otherwise it is just have many modifications you have unfortunately.

Is it possible in the title card to create line break to organize the text?

Hello I can’t make the motion sensor chip card animate, managed to do it for a AC chip card but this one no:

image
Like in this example
image

I think I am close but I’m missing something…


type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:knife
    icon_color: |-
      {% if is_state('light.kitchen_main_light', 'on') %}
        orange
      {% endif %}
    primary: Kitchen
    secondary: >-
      {{ states('sensor.kitchen_multi_sensor_temperature') | round(1) }}°C  - {{
      states('sensor.kitchen_multi_sensor_humidity')| round}}%
    tap_action:
      action: navigate
      navigation_path: kitchen
    hold_action:
      action: toggle
    entity: light.kitchen_lights
    multiline_secondary: false
    fill_container: false
    card_mod:
      style: |
        ha-card {
          background :rgba(var(--rgb-primary-text-color), 0.025);      
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: binary_sensor.kitchen_motion_sensor_occupancy
        icon: |-
          {% if is_state(config.entity, 'on') %}
            mdi:motion-sensor
          {% else %}
            mdi:motion-sensor-off
          {% endif %}
        icon_color: |-
          {% if is_state(config.entity, 'on') %}
          primary
          {% else %}
          grey
          {% endif %}
        tap_action:
          action: more-info
      - type: template
        entity: sensor.kitchen_cooktop_current_comsumption
        icon: mdi:stove
        icon_color: |-
          {% set consumptiontion_level = states(entity) | float(0) %}
          {% if consumptiontion_level > 0 %} 
            primary
          {% else %}
            grey
          {% endif %}
      - type: template
        icon: |-
          {% if is_state(config.entity, 'on') %}
            mdi:window-open-variant
          {% else %}
            mdi:window-closed-variant
          {% endif %}
        icon_color: |-
          {% if is_state(config.entity, 'on') %}
          primary
          {% else %}
          grey
          {% endif %}
        entity: binary_sensor.window_sensor_kitchen_contact
    alignment: end
    card_mod:
      style: |
        ha-card {
         --chip-box-shadow: none;
         --chip-background: none;
         --chip-spacing: -0.5em;
         --chip-icon-size: 0.5em
         }
         
        mushroom-template-chip:nth-child(1)$: |
          ha-state-icon {
            animation: clip 2s linear infinite;
          }
          @keyframes clip {
            50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
          }
card_mod:
  style: |
    ha-card {
      height: 102px;
    }

Here’s my full room cards for now for anyone interested :

image

type: horizontal-stack
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:knife
        icon_color: |-
          {% if is_state('light.kitchen_main_light', 'on') %}
            orange
          {% endif %}
        primary: Kitchen
        secondary: >-
          {{ states('sensor.kitchen_multi_sensor_temperature') | round(1) }}°C 
          - {{ states('sensor.kitchen_multi_sensor_humidity')| round}}%
        tap_action:
          action: navigate
          navigation_path: kitchen
        hold_action:
          action: toggle
        entity: light.kitchen_lights
        multiline_secondary: false
        fill_container: false
        card_mod:
          style: |
            ha-card {
              background :rgba(var(--rgb-primary-text-color), 0.025);      
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: binary_sensor.kitchen_motion_sensor_occupancy
            icon: |-
              {% if is_state(config.entity, 'on') %}
                mdi:motion-sensor
              {% else %}
                mdi:motion-sensor-off
              {% endif %}
            icon_color: |-
              {% if is_state(config.entity, 'on') %}
              primary
              {% else %}
              grey
              {% endif %}
            tap_action:
              action: more-info
          - type: template
            entity: sensor.kitchen_cooktop_current_comsumption
            icon: mdi:stove
            icon_color: |-
              {% set consumptiontion_level = states(entity) | float(0) %}
              {% if consumptiontion_level > 0 %} 
                primary
              {% else %}
                grey
              {% endif %}
          - type: template
            icon: |-
              {% if is_state(config.entity, 'on') %}
                mdi:window-open-variant
              {% else %}
                mdi:window-closed-variant
              {% endif %}
            icon_color: |-
              {% if is_state(config.entity, 'on') %}
              primary
              {% else %}
              grey
              {% endif %}
            entity: binary_sensor.window_sensor_kitchen_contact
        alignment: end
        card_mod:
          style: |
            ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: -0.5em;
            --chip-icon-size: 0.5em}
            }
    card_mod:
      style: |
        ha-card {
          height: 102px;
        }
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        secondary: >-
          {{ states('sensor.aqara_multi_sensor_2_living_room_temperature') |
          round(1) }} °C - {{
          states('sensor.aqara_multi_sensor_2_living_room_humidity') |
          round(0)}}%
        icon: mdi:sofa
        entity: light.living_room_lights
        icon_color: |-
          {% if is_state('light.living_room_lights', 'on') %}
            orange
          {% endif %}
        primary: Living Room
        hold_action:
          action: call-service
          service: light.toggle
          service_data:
            transition: 1
            brightness_pct: 75
          target:
            area_id: living_room
        tap_action:
          action: navigate
          navigation_path: livingroom
        multiline_secondary: false
        fill_container: true
        card_mod:
          style: |
            ha-card {
              background :rgba(var(--rgb-primary-text-color), 0.025);      
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon_color: |-
              {% if is_state(config.entity, 'on') %}
              primary
              {% else %}
              grey
              {% endif %}
            icon: |-
              {% if is_state(config.entity, 'on') %}
                mdi:radiator
              {% else %}
                mdi:radiator-off
              {% endif %}
            entity: switch.living_room_heater_garden_left_switch_0
          - type: template
            entity: input_boolean.ryzen_5700x_pc
            icon: |-
              {% if is_state(config.entity, 'on') %}
                mdi:desktop-tower-monitor
              {% else %}
                mdi:desktop-tower-monitor
              {% endif %}
            icon_color: |-
              {% if is_state(config.entity, 'on') %}
              primary
              {% else %}
              grey
              {% endif %}
            tap_action:
              action: more-info
          - type: conditional
            conditions: []
            chip:
              type: template
              icon_color: |-
                {% if is_state(config.entity, 'off') %}
                grey
                {% else %}
                primary
                {% endif %}
              entity: climate.daikin_living_room
              icon: |-
                {% if is_state(entity, 'heat_cool') %}
                  mdi:sync
                {% elif is_state(entity, 'heat') %}
                  mdi:fire
                {% elif is_state(entity, 'cool') %}
                  mdi:snowflake
                {% elif is_state(entity, 'dry') %}
                  mdi:water-percent
                {% elif is_state(entity, 'fan_only') %}
                  mdi:fan
                {% else %}
                  mdi:air-conditioner
                {% endif %}
              card_mod:
                style: |

                  ha-card {
                    animation: spin linear infinite;
                    {% if is_state(config.entity, 'heat_cool') %}
                       animation: spin 3s ease-in-out infinite alternate;
                    {% elif is_state(config.entity, 'cool') %}
                       animation: cool 6s ease-in-out infinite;
                    {% elif is_state(config.entity, 'heat') %}
                       animation: heat 2s infinite;
                    {% elif is_state(config.entity, 'dry') %}
                       animation: dry 1.5s linear infinite;
                    {% elif is_state(config.entity, 'fan_only') %}
                       animation: spin 1s linear infinite;
                    {% endif %}
                  }
                  @keyframes cool {
                    0%, 100% { transform: rotate(25deg); }
                    25% { transform: rotate(-25deg); }
                    50% { transform: rotate(50deg); }
                    75% { transform: rotate(-50deg); }
                  }
                  @keyframes heat {
                    0%, 100% { --icon-color: rgba(var(--rgb-red), 1); }
                    10%, 90% { --icon-color: rgba(var(--rgb-red), 0.8); }
                    20%, 80% { --icon-color: rgba(var(--rgb-red), 0.6); }
                    30%, 70% { --icon-color: rgba(var(--rgb-red), 0.4); }
                    40%, 60% { --icon-color: rgba(var(--rgb-red), 0.2); }
                    50% { --icon-color: rgba(var(--rgb-red), 0); }
                  }
                  @keyframes dry {
                    0%, 100% { --icon-symbol-size: 21px; }
                    10%, 90% { --icon-symbol-size: 22px; }
                    20%, 80% { --icon-symbol-size: 23px; }
                    30%, 70% { --icon-symbol-size: 24px; }
                    40%, 60% { --icon-symbol-size: 25px; }
                    50% { --icon-symbol-size: 26px; }
                  }
          - type: template
            entity: binary_sensor.livingroom_window_contact_contact
            icon: |-
              {% if is_state(config.entity, 'on') %}
                mdi:window-open-variant
              {% else %}
                mdi:window-closed-variant
              {% endif %}
            icon_color: |-
              {% if is_state(config.entity, 'on') %}
              primary
              {% else %}
              grey
              {% endif %}
            tap_action:
              action: more-info
          - type: template
            entity: binary_sensor.livingroom_door_contact_contact
            icon: |-
              {% if is_state(config.entity, 'on') %}
                mdi:door-open
              {% else %}
                mdi:door-closed
              {% endif %}
            icon_color: |-
              {% if is_state(config.entity, 'on') %}
              primary
              {% else %}
              grey
              {% endif %}
            tap_action:
              action: more-info
          - type: template
            entity: media_player.living_room_speaker
            icon: |-
              {% if is_state(config.entity, 'playing') %}
                mdi:speaker-play
              {% else %}
                mdi:speaker-off
              {% endif %}
            icon_color: |-
              {% if is_state(config.entity, 'playing') %}
              primary
              {% else %}
              grey
              {% endif %}
            tap_action:
              action: more-info
          - type: template
            entity: vacuum.vaccubot
            icon: |-
              {% if is_state(config.entity, 'on') %}
                mdi:robot-vacuum
              {% else %}
                mdi:robot-vacuum-off
              {% endif %}
            icon_color: |-
              {% if is_state(config.entity, 'on') %}
              primary
              {% else %}
              grey
              {% endif %}
          - type: template
            icon_color: |-
              {% if is_state(config.entity, 'on') %}
              primary
              {% else %}
              grey
              {% endif %}
            icon: |-
              {% if is_state(config.entity, 'on') %}
                mdi:air-humidifier
              {% else %}
                mdi:air-humidifier-off
              {% endif %}
            entity: humidifier.humidifier
        alignment: end
        card_mod:
          style: |
            ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: -0.5em;
            --chip-icon-size: 0.5em}
            }
    card_mod:
      style: |
        ha-card {
          height: 102px;
        }

And some WIP work on graph with dynamic color, directly integrated in the room cards thanks
PskNorz
NoRz for the ideas !
image

6 Likes

Ok I managed to have it working :

Animation

But now that bit of code isn’t working:

      ha-card {
      --chip-box-shadow: none;
      --chip-background: none;
      --chip-spacing: -0.5em;
      --chip-icon-size: 0.5em
      }

I think it has to be the placement of this key : “|”
From what I understand it act like the opening of an {}
When I put it like this:
" style: | ", ha-card {…} work but not ha-state-icon {…}

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: binary_sensor.kitchen_motion_sensor_occupancy
    icon: |-
      {% if is_state(config.entity, 'on') %}
        mdi:motion-sensor
      {% else %}
        mdi:motion-sensor-off
      {% endif %}
    icon_color: |-
      {% if is_state(config.entity, 'on') %}
      primary
      {% else %}
      grey
      {% endif %}
    tap_action:
      action: more-info
  - type: template
    entity: sensor.kitchen_cooktop_current_comsumption
    icon: mdi:stove
    icon_color: |-
      {% set consumptiontion_level = states(entity) | float(0) %}
      {% if consumptiontion_level > 0 %} 
        primary
      {% else %}
        grey
      {% endif %}
  - type: template
    icon: |-
      {% if is_state(config.entity, 'on') %}
        mdi:window-open-variant
      {% else %}
        mdi:window-closed-variant
      {% endif %}
    icon_color: |-
      {% if is_state(config.entity, 'on') %}
      primary
      {% else %}
      grey
      {% endif %}
    entity: binary_sensor.window_sensor_kitchen_contact
alignment: end
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        animation: clip 2s linear infinite;
      }
      @keyframes clip {
        50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
        }
      ha-card {
      --chip-box-shadow: none;
      --chip-background: none;
      --chip-spacing: -0.5em;
      --chip-icon-size: 0.5em
      }
      }