Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1)

Share your Projects!
,
3109

Hi,

first of all I am really impressed by this thread!
Until now I am only a “reader” of this channel and already found very helpful ideas for my HA dashboard.

Now I would like to modify the Mushroom Alarm Card with different icons and color code.
I already tried a lot with Card Mod but I don’t come to the preferred solution.

  1. The main icon (Mushroom State Icon?) shall be changed according to alarm status (with different icons)
  2. The icons for the 5 mushroom buttons (all alarm states are visible) shall be changed
  3. The color code shall be changed according to alarm status
  4. The size of each of the mushroom button icons shall be increased

The main question: How do I modify the Mushroom State Icon and the Mushroom Button Icons at the same time? I only managed to modify one of both.

Here is my current code that does not work properly:

type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.alarmsystem
states:
  - armed_home
  - armed_away
  - armed_night
  - armed_vacation
  - armed_custom_bypass
layout: vertical
card_mod:
  style:
    mushroom-button:nth-child(5)$: |
      ha-icon {
        --card-mod-icon: mdi:shield-account-outline;
      }
    .: |
      mushroom-shape-icon {
        {% if states(config.entity) == "disarmed" %}
          --card-mod-icon: mdi:shield-off;
        {% elif states(config.entity) == "armed_away" %}
          --card-mod-icon: mdi:shield-home;
        {% elif states(config.entity) == "armed_home" %}
          --card-mod-icon: mdi:shield-lock;
        {% elif states(config.entity) == "armed_night" %}
          --card-mod-icon: mdi:shield-moon;
        {% elif states(config.entity) == "armed_vacation" %}
          --card-mod-icon: mdi:shield-airplane;
        {% elif states(config.entity) == "armed_custom_bypass" %}
          --card-mod-icon: mdi:shield-account;
        {% elif states(config.entity) == "triggered" %}
          --card-mod-icon: mdi:shield-alert;
        {% endif %}
      }

Thank you very much in advance!

1 Like