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

Share your Projects!
,
5954

Try like this:

        mushroom-shape-icon$: |
          .shape {
            {% if is_state(config.entity, 'on') %}
              --shape-animation: ping 2s infinite;
            {% endif %}
          }
          @keyframes ping {
            0% {
              box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7);
            }
            100% {
              box-shadow: 0 0 5px 15px transparent;
            }
          }
        .: |
          ha-card {
            --ha-card-border-width: 0;
          }
1 Like
5955

You beauty!

/* Thanks! */
body::before {
  content: "Thanks for styling my life!";
  font-size: 2em;
  color: #bada55;
  text-align: center;
  display: block;
  margin-top: 20px;
}
1 Like
5956

Does anyone know where the color codes for the icons are listed?

5957

Do you mean:

export const COLORS = [
    "red",
    "pink",
    "purple",
    "deep-purple",
    "indigo",
    "blue",
    "light-blue",
    "cyan",
    "teal",
    "green",
    "light-green",
    "lime",
    "yellow",
    "amber",
    "orange",
    "deep-orange",
    "brown",
    "grey",
    "blue-grey",
    "black",
    "white",
    "disabled",
];
5958

Yes! But I need the colour for a custom card that does not register “green” for example. So a RGB or HEX code would be really helpful.

5959 
--icon-color: rgb(var(--rgb-white));
5960

here you can find the list of mushroom colors with RGB

1 Like
5961

Many thanks!!

5962

Never used that myself, and it’s nice! but, shouldn’t you be using background-blend-mode: darken when in dark mode …
see: CSS background-blend-mode property

5963

For the love of god I cannot seem to get this “Goedemiddag, Roger” text to turn bold:

Screenshot 2023-03-16 at 13.04.28
Screenshot 2023-03-16 at 13.04.281000×522 31 KB 

      - type: custom:mushroom-title-card
        title: |-
          {% set time = now().hour %}
          {% if (time >= 18) %} 
           Goedenavond, {{user}}!
          {% elif (time >= 12) %}
           Goedemiddag, {{user}}!
          {% elif (time >= 5) %}
           Goedemorgen, {{user}}!
          {% else %}
           Hello, {{user}}
          {% endif %}
        subtitle: ''
        card_mod:
          style: |
            ha-card { 
              margin-right: 0px;
            }
            .title {
              font-size: 24px !important;
              font-weight: bold !important;
            }
5964

Hi All,
I need help changing the icon color of individual entities for chip cards based on state. I have 4 chips nested in a vertical-stack card. I can get them all to change color when one of the four states is “on”, but I want the individual chip to change color when on and not all four. Can someone help me out with the code?

Screenshot

Attempt at individual chip change and does not work.

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Sprinklers
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: switch.flowerbeds
        icon: mdi:sprinkler
        name: Flower Beds
        content_info: name
        card_mod:
          style: |
            ha-card {
              {% if states('switch.flowerbeds') == 'on' %}
                --card-mod-icon-color: green;
              {% endif %}
              }
      - type: entity
        entity: switch.frontyard
        icon: mdi:sprinkler
        name: Front yard
        content_info: name
      - type: entity
        entity: switch.backyard
        icon: mdi:sprinkler
        name: Backyard
        content_info: name
      - type: entity
        entity: switch.sideyard
        name: Side yard
        content_info: name
        icon: mdi:sprinkler

This way turns all green even if a single chip (entity) is on.

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Sprinklers
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: switch.flowerbeds
        icon: mdi:sprinkler
        name: Flower Beds
        content_info: name
      - type: entity
        entity: switch.frontyard
        icon: mdi:sprinkler
        name: Front yard
        content_info: name
      - type: entity
        entity: switch.backyard
        icon: mdi:sprinkler
        name: Backyard
        content_info: name
      - type: entity
        entity: switch.sideyard
        name: Side yard
        content_info: name
        icon: mdi:sprinkler
    card_mod:
      style: |
        ha-card {
          {% if states('switch.flowerbeds') == 'on' %}
            --card-mod-icon-color: green;
          {% elif states('switch.frontyard') == 'on' %}
            --card-mod-icon-color: green;
          {% elif states('switch.backyard') == 'on' %}
            --card-mod-icon-color: green;
          {% elif states('switch.sideyard') == 'on' %}
            --card-mod-icon-color: green;
          {% endif %}
        }
5965

thank you for your answer, i used the darken mode baut i need to change that automaticaly.

5966

The better one to use is background-blend-mode: saturation. This will work with both dark and light modes.

1 Like
5967

The Mushroom Title card does not have any ha-card. You will need to use mod-card:

1 Like
5968

The Mushroom colors are defined as HEX values in HA like this --[color]-color:

--disabled-color
--red-color
--pink-color
--purple-color
--deep-purple-color
--indigo-color
--blue-color
--light-blue-color
--cyan-color
--teal-color
--green-color
--light-green-color
--lime-color
--yellow-color
--amber-color
--orange-color
--deep-orange-color
--brown-color
--light-grey-color
--grey-color
--dark-grey-color
--blue-grey-color
--black-color
--white-color

These can be used with most cards using var() like this var(--pink-color).

The --rgb-[color] values can only be used with a Mushroom card.

2 Likes
5969

btw, can you post the rest of the card config itself? I dont use these cards yet, and could use a head start :wink:

5970

I am trying to your album art with node-red but I am getting this error, I use echo dot as my speaker, have universal media player running, do you know why that field is empty?

image
image936×600 13.6 KB

5971

Add a debug node and see what the function node is outputting.

5972

It works, thanks a lot!

1 Like
5973

Is it possible with the Mushroom Media player card to overwrite the entity image and also when using media infos, in certain cases with a template to overwrite the display text for priamary information?