Support for Mushroom cards

[LordPsycho202]

Loving the idea behind this - it should simplify my lcars dashboard.

However, it would be nice if the mushroom cards could be supported - especially the mushroom chips card.

https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590

Thank you!

[th3jesta]

Added in 2.2.

[LordPsycho202]

Thank you!

[roberthawdon]

How do you configure these now? Mushroom cards looked fine before this update.

[th3jesta]

They should look okay if you remove whatever class you added to them. I didn't realize how many people were using them particularly with the middle- type classes. Now that I know this, I will be pushing a small update in the next 24 hours so that folks who already have classes applied won't have issues. If you want to roll back until I push the update, you won't have to modify anything on your dashboards.

[th3jesta]

Just released 2.2.1. Many of the card configurations have been removed, as I realized it's a lot saner to control text color like the other HA cards: with classes. If you want your Mushroom cards to have black text, apply button-large or button-small to them. Chips cards will always be black text.

[roberthawdon]

Sorry, but is there any way to override the chip cards to use white text? Or is there a more recommended way to display them?

[th3jesta]

Are you applying any custom style to them to black out their backgrounds?

[roberthawdon]

Yes, I'm using "middle-blank" on each individual chip, I've posted a copy of one of my stacks below. It looks ok with the coloured background if I remove the class from each chip as the black text is readable.

type: vertical-stack
cards:
  - type: markdown
    card_mod:
      class: header
    content: >-
      # Node-RED

      Installed v{{ states('sensor.node_red_version') }} - Latest v{{
      states('sensor.node_red_newest_version') }}  
  - type: custom:mushroom-chips-card
    card_mod:
      class: middle
    chips:
      - type: entity
        entity: binary_sensor.node_red_running
        icon_color: green
        card_mod:
          class: middle-blank
      - type: entity
        entity: sensor.node_red_version
        icon_color: green
        icon: mdi:package-variant-closed
        card_mod:
          class: middle-blank
      - type: entity
        entity: sensor.node_red_cpu_percent
        icon_color: blue
        card_mod:
          class: middle-blank
      - type: entity
        entity: sensor.node_red_memory_percent
        icon_color: orange
        card_mod:
          class: middle-blank
  - type: custom:mushroom-update-card
    entity: update.node_red_update
    show_buttons_control: true
    icon_type: entity-picture
    layout: horizontal
    card_mod:
      class: middle
  - type: markdown
    content: '#  '
    card_mod:
      class: footer

[th3jesta]

I see. So, I would consider removing the background of the chips to be an edge case since it fundamentally changes the intention of the original author, so I recommend trying this instead on each of your chips:

card_mod:
      style: |
        ha-card, .chips-container {
           --primary-text-color: var(--lcars-text-gray) !important;
           --text-color: var(--lcars-text-gray) !important;
        }
      class: middle-blank

I think this should work:

type: vertical-stack
cards:
  - type: markdown
    card_mod:
      class: header
    content: >-
      # Node-RED

      Installed v{{ states('sensor.node_red_version') }} - Latest v{{
      states('sensor.node_red_newest_version') }}  
  - type: custom:mushroom-chips-card
    card_mod:
      class: middle
    chips:
      - type: entity
        entity: binary_sensor.node_red_running
        icon_color: green
        card_mod:
          style: |
            ha-card, .chips-container {
               --primary-text-color: var(--lcars-text-gray) !important;
               --text-color: var(--lcars-text-gray) !important;
            }
          class: middle-blank
      - type: entity
        entity: sensor.node_red_version
        icon_color: green
        icon: mdi:package-variant-closed
        card_mod:
          style: |
            ha-card, .chips-container {
               --primary-text-color: var(--lcars-text-gray) !important;
               --text-color: var(--lcars-text-gray) !important;
            }
          class: middle-blank
      - type: entity
        entity: sensor.node_red_cpu_percent
        icon_color: blue
        card_mod:
          style: |
            ha-card, .chips-container {
               --primary-text-color: var(--lcars-text-gray) !important;
               --text-color: var(--lcars-text-gray) !important;
            }
          class: middle-blank
      - type: entity
        entity: sensor.node_red_memory_percent
        icon_color: orange
        card_mod:
          style: |
            ha-card, .chips-container {
               --primary-text-color: var(--lcars-text-gray) !important;
               --text-color: var(--lcars-text-gray) !important;
            }
          class: middle-blank
  - type: custom:mushroom-update-card
    entity: update.node_red_update
    show_buttons_control: true
    icon_type: entity-picture
    layout: horizontal
    card_mod:
      class: middle
  - type: markdown
    content: '#  '
    card_mod:
      class: footer

[roberthawdon]

Thanks, that works. I have gotten used to how it looks by default now, but it's good to know this option is available for future reference. Cheers