Mushroom light card Buttonfarbe

Dashboard/Cards/Frontend
1

Hi,

ich möchte die Farbe des icons auch blau angepasst.
Bildschirmfoto 2024-10-09 um 11.01.49

Soll halt so aussehen wie im an zustand nur in blau
Bildschirmfoto 2024-10-09 um 11.02.06

Ich hab gefunden wie ich das icon Blau bekomme aber den kreis drumrum find ich einfach nicht.

  - type: horizontal-stack
    cards:
      - type: custom:mushroom-light-card
        entity: light.shellydimmer2_ec64c9c4f5f4
        layout: vertical
        name: " "
        use_light_color: false
        show_brightness_control: true
        collapsible_controls: true
        show_color_temp_control: false
        show_color_control: false
        card_mod:
          style: |
            :host {
            --mush-icon-size: 70px;
            {% if is_state('light.shellydimmer2_ec64c9c4f5f4', 'on') %}
            --card-mod-icon-color: orange;
            {% else %}
            --card-mod-icon-color: steelblue
            {% endif %}
            }
            ha-card {
            background-color: transparent;
            box-shadow: none;
            border: none;
            }

thx für eure Hilfe

2

Moin,
für Mushroom + Cardmod gibt es ein sehr guten Thread in der Englischen Community:

Das für dich relevante ist hier:

LG
Tobi

3

the für die Info, schau ich mir an wenn ich aus dem Urlaub zurück bin

LG
Andreas

4

Ich komme auch nicht weiter, bei mir bewirkt das nichts. Der Hinergrund ist immer, was in ICON_COLOR vorgegeben ist… :crazy_face:

Hat jemand eine Idee?

type: custom:mushroom-template-card
primary: Ringlicht
secondary: ""
icon: mdi:brightness-5
icon_color: blue
multiline_secondary: false
layout: vertical
fill_container: true
entity: switch.zb_steckdose_ring
card_mod:
  style: |

    {% if is_state(config.entity, 'on') %}
      {% set color_icon = "blue" %}
      ha-state-icon {
       color: rgb(  33, 150, 243);
        }
      ha-state-icon {
      --card-mod-icon: mdi:lightbulb-off;
        }
      mushroom-shape-icon$: |
        .shape {
        --shape-color: amber !important;
        }      
    {% else %}
      {% set color_icon = "amber" %}
      ha-state-icon {
       color: rgb(255, 193, 7);
      }
      ha-state-icon {
      --card-mod-icon: mdi:lightbulb-on;
      }
      mushroom-shape-icon$: |
        .shape {
        --shape-color: blue !important;
        }  
    {% endif %}

    /* Add subtle color on hover */
    ha-card:hover {
     background: color-mix(in srgb, var(--{{ color_icon }}-color) 25%, var(--card-background-color)) !important;
    }
5

Leider wird das überall falsch angegeben. Nach einiger Zeit mit Dr. Google habe ich die Lösung gefunden.

type: custom:mushroom-template-card
primary: Ringlicht
secondary: ""
icon: mdi:brightness-5
icon_color: ""
multiline_secondary: false
layout: vertical
fill_container: true
entity: switch.zb_steckdose_ring
card_mod:
  style: |

    {% if is_state(config.entity, 'on') %}
      {% set color_icon = "amber" %}
     
      ha-state-icon {
        color: rgb(255, 193, 7);
        }
     
      ha-state-icon {
        --card-mod-icon: mdi:lightbulb-on;
        }

      mushroom-shape-icon {
        --shape-color: rgba( 255, 193, 7,.2) !important;
        }  
        
    {% else %}  
      
      {% set color_icon = "blue" %}
      
      ha-state-icon {
       color: rgb(  33, 150, 243);
        }
      
      ha-state-icon {
        --card-mod-icon: mdi:lightbulb-off;
        }

      mushroom-shape-icon {
        --shape-color: rgba( 33, 150, 243,.2) !important;
        }  

    {% endif %}


    /* Add subtle color on hover */
    ha-card:hover {
     background: color-mix(in srgb, var(--{{ color_icon }}-color) 25%, var(--card-background-color)) !important;
    }
6

Es ist ziemlich überall falsch dokumentiert, bei mir hat folgendes funktioniert.

      mushroom-shape-icon {
        --shape-color: rgba( 33, 150, 243,.2) !important;
        }
7

ich kann euch nicht ganz folgen, aber so ist es “richtiger”
zumindest mit der Mushroom Template card

EIN
Bildschirmfoto 2025-01-23 um 19.26.57

AUS
Bildschirmfoto 2025-01-23 um 19.28.54

code:

type: custom:mushroom-template-card
primary: Licht
secondary: |-
  {% if is_state('light.anrichte' , 'on') %} 
  Licht ist ein
  {% else %}
  Licht ist aus
  {% endif %}
icon: |-

  {% if is_state('light.anrichte' , 'on') %} 
  mdi:lightbulb-on
  {% else %}
  mdi:lightbulb-off
  {% endif %}
entity: light.anrichte
badge_color: ""
icon_color: |-
  {% if is_state('light.anrichte' , 'on') %} 
  amber
  {% else %}
  red
  {% endif %}
layout: vertical
card_mod:
  style: |
    :host {
    --mush-icon-size: 70px;
8

Ja, das ist der “normale” weg und definitiv nicht “richtiger”. So klappt es aber nicht mit der Farbänderung wenn die Maus über dem Button “hovert”. Das war ja mein Ziel.

Mein Weg ist der CARD_MOD Weg… Lad Dir mal meinen Code und nimmt eine von Deinen schaltbaren Entitäten. Dann geh mal mit der Maus über den Knopf.

9

okay, habe das mit dem hover überlesen