Mushroom Cards Card Mod Styling/Config Guide

Hi, how can I make my icon here “white”, not or transparent is displayed
image

    icon_color: |-
      {% if is_state('binary_sensor.fenster_wz', 'off') %}
      white

Hier der ganze Code

type: custom:mushroom-chips-card
alignment: center
chips:
  - type: template
    entity: binary_sensor.fenster_wz
    tap_action:
      action: more-info
    icon: |-
      {% if is_state('binary_sensor.fenster_wz', 'off') %}
      mdi:window-closed-variant
      {% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
      mdi:alarm-light
      {% else %}
      mdi:window-open-variant
      {% endif %}
    icon_color: |-
      {% if is_state('binary_sensor.fenster_wz', 'off') %}
      white
      {% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
      blue
      {% else %}
      red
      {% endif %} 
    card_mod:
      style: |
        ha-card {
          background-color: none !important;
          box-shadow: none !important;
          border: none !important;
        }

The card mod line background-color: none !important; is making the icon transparent.

with the following code
image

type: custom:mushroom-chips-card
alignment: center
chips:
  - type: template
    entity: binary_sensor.fenster_wz
    tap_action:
      action: more-info
    icon: |-
      {% if is_state('binary_sensor.fenster_wz', 'off') %}
      mdi:window-closed-variant
      {% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
      mdi:alarm-light
      {% else %}
      mdi:window-open-variant
      {% endif %}
    icon_color: |-
      {% if is_state('binary_sensor.fenster_wz', 'off') %}
      white
      {% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
      blue
      {% else %}
      red
      {% endif %} 
    card_mod:
      style: |
        ha-card {
          background-color: #ffff66 !important;
          box-shadow: none !important;
          border:  2px solid red !important;
        }

Hello.
First off i wanted to thank you for this amazing guide.
However i encountered a problem when trying to change the color of the slider of a mushroom-fan-card. Changing the icon colors works fine as expected but the slider doesn’t.
Does anybody have an idea why this doesnt work?

On the right hand side you can see that the style is not overwritten.

This is my yaml code:

- type: custom:mushroom-fan-card
        entity: fan.wohnraumluftung
        icon_animation: true
        fill_container: false
        show_percentage_control: true
        show_oscillate_control: false
        collapsible_controls: true
        card_mod:
          style: |
            mushroom-shape-icon{
              --icon-color: rgb(var(--rgb-light-blue)) !important;
              --shape-color: rgba(var(--rgb-light-blue), 0.2) !important;
            }
            mushroom-fan-percentage-control$: |
              mushroom-slider {
                  --main-color: rgb(var(--rgb-light-blue)) !important;
                  --bg-color: #d1eced !important;
                }

Thank you. But the point is to make the ICON (here white) itself “transparent” in the off state so that it is not visible. Here, for example, only the green icon should be visible.
Or perhaps there is another, more intelligent way of doing this?

take a look in the first post at the section called what the .: | and $ symbols do.

but essentially the issue is you have 2 | in a row. that is not allowed.

        card_mod:
          style: |
            mushroom-fan-percentage-control$: |
              mushroom-slider {
                  --main-color: rgb(var(--rgb-light-blue)) !important;
                  --bg-color: #d1eced !important;
                }

You see?

should be like this:

        card_mod:
          style:
            mushroom-fan-percentage-control$: |
              mushroom-slider {
                  --main-color: rgb(var(--rgb-light-blue)) !important;
                  --bg-color: #d1eced !important;
                }
            .: |
              mushroom-shape-icon{
                --icon-color: rgb(var(--rgb-light-blue)) !important;
                --shape-color: rgba(var(--rgb-light-blue), 0.2) !important;
              }
1 Like

use card mod to make the icon transparent when the condition is met. something like this:

type: custom:mushroom-chips-card
alignment: center
chips:
  - type: template
    entity: binary_sensor.fenster_wz
    tap_action:
      action: more-info
    icon: |-
      {% if is_state('binary_sensor.fenster_wz', 'off') %}
      mdi:window-closed-variant
      {% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
      mdi:alarm-light
      {% else %}
      mdi:window-open-variant
      {% endif %}
    icon_color: |-
      {% if is_state('binary_sensor.fenster_wz', 'off') %}
      white
      {% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
      blue
      {% else %}
      red
      {% endif %} 
    card_mod:
      style: |
        ha-card {
          background-color: none !important;
          box-shadow: none !important;
          border: none !important;
        }
card_mod:
  style: |
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        {% if states('cover.yourcover') == 'off' %}
          color: transparent !important;
        {% endif %}
      }

Ah yes thank you for clarifying, it is working now.
Thank you so much!!!

sorry if this comes across as overasking…
but… in my effort to take out as many custom cards a possible, if not remotely possible to mimic them in core, would you happen to know the correct Dom path for animating the icon in the Tile card on a fan…

  - type: tile
    entity: fan.luchtreiniger_woonkamer
    state_content:
      - state
      - percentage
      - last-changed
    features:
      - type: fan-speed
    card_mod:
      style: |
        ha-tile-icon {
          animation: wobbling 0.7s linear infinite alternate;
        }
        @keyframes wobbling {
          0% {transform: rotate(-80deg);}
          100% {transform: rotate(40deg);}
        }

or even .icon which does allow to colorize the icon are showing any animation.

I did set it to ha-card to see if the animation itself is working, and that was a bit too much haha.

hope you would be able to nudge me in the right direction

not a big ask, but technically out of scope. but i am working on a tile guide, so i have the answer immediately anyway :slight_smile:

    type: tile
    entity: fan.ensuite_relay_l1
    state_content:
      - state
      - percentage
      - last-changed
    features:
      - type: fan-speed
    card_mod:
      style:
        ha-tile-icon$: |
          ha-svg-icon {
            animation: wobbling 0.7s linear infinite alternate;
          }
          @keyframes wobbling {
            0% {transform: rotate(-80deg);}
            100% {transform: rotate(40deg);}
          }

FYI, sometimes you will need just ha-icon sometimes ha-svg-icon think anywhere that the icon might change based on state you need ha-svg-icon whereas if its static you just need ha-icon.

oh and if you have manually assigned an icon in the card using the visual editor then it will also be ha-icon

2 Likes

nice Dimitri,

Ive used this now, and it works perfectly

card_mod:
  style:
    ha-tile-icon$: |
      ha-svg-icon {
        animation:
          {% if is_state(config.entity,'on') %}
          {% set perc = state_attr(config.entity,'percentage')|int %}
          {% set base =
            'rotation infinite linear, colorize 5s linear forwards 1' %}
          {% if perc <= 15 %} 4s {{base}};
          {%- elif perc <= 33 %} 3s {{base}};
          {%- elif perc <= 67 %} 1.5s {{ base}};
          {%- else  %} 0.75s {{base}};
          {% endif %}
          {% else %} none;
          {% endif %}
      }
      @keyframes rotation {
        0% {transform: rotate(0deg);}
        100% {transform: rotate(360deg);}
      }
    .: |
      .icon {
        --tile-color:
          {% if is_state(config.entity,'on') %}
          {% set perc = state_attr(config.entity,'percentage')|int %}
          {% if perc <= 15 %} lightblue;
          {%- elif perc <= 33 %} lightskyblue;
          {%- elif perc <= 67 %} dodgerblue;
          {%- else  %} darkblue;
          {% endif %};
          {% else %} var(--state-inactive-color);
          {% endif %}
      }

edit

added some corresponding blue colors.

too bad this doesnt also change the slider color. might need an extra yaml anchor on those…

2 Likes

dont have a fan with a speed control, but i think it might be this? havent gotten to fans yet :slight_smile:

type: tile
entity: fan.downstairs_bathroom_relay_l1
features:
  - type: fan-speed
card_mod:
  style:
    hui-tile-features$:
      hui-fan-speed-tile-feature$:
        ha-control-slider {
          --control-slider-color: blue !important;
          --control-slider-background: darkblue !important;
          --control-slider-background-opacity: 1 !important;
        }

right, Ive been playing with those, but the tile card is a horrible card to mod…

one would wish for a single color element to suffice for the other elements to default along. But as far as I got now, we need to mod all independently.

let me have a go, and if you want it in a separate thread, Id be happy to post there, not polluting the Mushroom guide…

btw still fighting with my entity-pictures in the map card, which seems to be the most difficult card for styling its entities

its alright. you migth be able to use mostly these 2 for colors, but its a bit annoying yes.

card_mod:
  style:
    hui-card-features$:
      hui-cover-position-card-feature$: |
        .container {
          --color: red !important;
        }
    .: |
      ha-card {
        --tile-color: red !important
      }

Dom seems different and like this:

  hui-card-features$:
    hui-fan-speed-card-feature$: |
      ha-control-slider {
        --control-slider-color:
          {% if is_state(config.entity,'on') %}
          {% set perc = state_attr(config.entity,'percentage')|int %}
          {% if perc <= 15 %} lightblue !important;
          {%- elif perc <= 33 %} lightskyblue !important;
          {%- elif perc <= 67 %} dodgerblue !important;
          {%- else  %} darkblue !important;
          {% endif %};
          {% else %} var(--state-inactive-color);
          {% endif %};
        --control-slider-background-opacity: 1 !important;
      }

but as you can see we still need some auto adaptation for the background

that container --color does nothing…
suppose we need the same for the slider background what the icon background does on the colored icons.

I cant test with a fan sorry. but for the cover card the --color works as long as the path is the same taken.

but for the background you can just use this and not use the opacity at all. set it to the same color as the slider.

--control-slider-background: darkblue !important;

yes that works (might need to have another look at those colors)

Jan-29-2024 16-26-42

style:
  ha-tile-icon$: |
    ha-svg-icon {
      animation:
        {% if is_state(config.entity,'on') %}
        {% set perc = state_attr(config.entity,'percentage')|int %}
        {% set base =
          'rotation infinite linear, colorize 5s linear forwards 1' %}
        {% if perc <= 15 %} 4s {{base}};
        {%- elif perc <= 33 %} 3s {{base}};
        {%- elif perc <= 67 %} 1.5s {{ base}};
        {%- else  %} 0.75s {{base}};
        {% endif %}
        {% else %} none;
        {% endif %}
    }
    @keyframes rotation {
      0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
    }
  hui-card-features$:
    hui-fan-speed-card-feature$: |
      ha-control-slider {
        --control-slider-color:
          {% if is_state(config.entity,'on') %}
          {% set perc = state_attr(config.entity,'percentage')|int %}
          {% if perc <= 15 %} lightblue !important;
          {%- elif perc <= 33 %} lightskyblue !important;
          {%- elif perc <= 67 %} dodgerblue !important;
          {%- else  %} darkblue !important;
          {% endif %};
          {% else %} var(--state-inactive-color);
          {% endif %};
        --control-slider-background:
          {% if is_state(config.entity,'on') %}
          {% set perc = state_attr(config.entity,'percentage')|int %}
          {% if perc <= 15 %} lightblue !important;
          {%- elif perc <= 33 %} lightskyblue !important;
          {%- elif perc <= 67 %} dodgerblue !important;
          {%- else  %} darkblue !important;
          {% endif %};
          {% else %} var(--state-inactive-color);
          {% endif %};
      }
  .: |
    .icon {
      --tile-color:
        {% if is_state(config.entity,'on') %}
        {% set perc = state_attr(config.entity,'percentage')|int %}
        {% if perc <= 15 %} lightblue;
        {%- elif perc <= 33 %} lightskyblue;
        {%- elif perc <= 67 %} dodgerblue;
        {%- else  %} darkblue;
        {% endif %};
        {% else %} var(--state-inactive-color);
        {% endif %}
    }

no more opacity.
will check if I can anchor those templates…

2 Likes

Thanks for reply

image

is not transparent in off

type: custom:mushroom-chips-card
alignment: center
chips:
  - type: template
    entity: binary_sensor.fenster_wz
    tap_action:
      action: more-info
    icon: |-
      {% if is_state('binary_sensor.fenster_wz', 'off') %}
      mdi:window-closed-variant
      {% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
      mdi:alarm-light
      {% else %}
      mdi:window-open-variant
      {% endif %}
    icon_color: |-
      {% if is_state('binary_sensor.fenster_wz', 'off') %}
      white
      {% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
      blue
      {% else %}
      red
      {% endif %} 
    card_mod:
      style: |
        ha-card {
          background-color: none !important;
          box-shadow: none !important;
          border: none !important;
        }
card_mod:
  style: |
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        {% if states('binary_sensor.fenster_wz') == 'off' %}
          color: transparent !important;
        {% endif %}
      }

Oopps, i made a mistake. Remove the | after style: |

card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        {% if states('binary_sensor.fenster_wz') == 'off' %}
          color: transparent !important;
        {% endif %}
      }

There are several ways, I’ll put together 2 options.

1 Like

Now background is not transparent or none