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

Vandana · September 23, 2022, 1:33am

Exactly copy-pasted your code but still only the icon color is changing along with slider.

type: custom:mushroom-media-player-card
entity: media_player.music
volume_controls:
  - volume_mute
  - volume_set
  - volume_buttons
card_mod:
  style:
    mushroom-media-player-media-control$: |
      mushroom-button {
        --bg-color: rgba(var(--rgb-green), 0.05);
      }
    mushroom-media-player-volume-control$: |
      mushroom-button {
        --bg-color: rgba(var(--rgb-green), 0.05);
      }
    .: |
      mushroom-button {
        --bg-color: rgba(var(--rgb-yellow), 0.05);
      }
      :host {
        --mush-rgb-state-media-player: var(--rgb-pink);
      }

What am I doing wrong ?

theandouz · September 23, 2022, 2:58am

Looks like the opacity of the colour is turned wayy down try changing the 0.05 value up to something like 0.2

card_mod:
  style:
    mushroom-media-player-media-control$: |
      mushroom-button {
        --bg-color: rgba(var(--rgb-green), 0.2);
      }
    mushroom-media-player-volume-control$: |
      mushroom-button {
        --bg-color: rgba(var(--rgb-green), 0.2);
      }
    .: |
      mushroom-button {
        --bg-color: rgba(var(--rgb-yellow), 0.5);
      }
      :host {
        --mush-rgb-state-media-player: var(--rgb-pink);
      }

Vandana · September 23, 2022, 4:21am

thank you @theandouz @rhysb, changing the opacity worked…

Please guide how to change the color from white to any color of the icons (the blue encircled ones)?
How to change the color of the media_info e.g. “Music” and “Playing” in this case?

Thank you…

rhysb · September 23, 2022, 7:16am

You can like this:

card_mod:
  style:
    mushroom-media-player-media-control$: |
      mushroom-button {
        --bg-color: rgba(var(--rgb-green), 0.2);
        --primary-text-color: rgb(var(--rgb-green));
      }
    mushroom-media-player-volume-control$: |
      mushroom-button {
        --bg-color: rgba(var(--rgb-blue), 0.2);
        --primary-text-color: rgb(var(--rgb-blue));
      }
    .: |
      mushroom-button {
        --bg-color: rgba(var(--rgb-yellow), 0.2);
        --primary-text-color: rgb(var(--rgb-yellow));
      }
      :host {
        --mush-rgb-state-media-player: var(--rgb-pink);
        --secondary-text-color: rgb(var(--rgb-cyan));
      }

gfandrea · September 23, 2022, 7:22am

What can I add in the mushroom theme yaml to change the color of the chips icon when the entity is inactive?
I would like to make them darker

Thank you

codedmind · September 23, 2022, 7:51am

Can you share the code?

Vandana · September 23, 2022, 8:17am

Thank you so much @rhysb… Really appreciate your help…

One more query… how to shift the slider and the button towards the center to make it align with primary and secondary info. I used the below code to reduce the height of the slider.

                  ha-card {
                  --control-height: 25px;
                  }

flemmingss · September 23, 2022, 8:19am

Can I place some buttons to cal services where secondary_info normally is?

rhysb · September 23, 2022, 8:41am

You can like this:

      .actions {
        align-items: center !important;
      }

rhysb · September 23, 2022, 8:49am

Change mush-rgb-disabled for light and dark themes.

    modes:
        light: 
            mush-rgb-disabled: 189, 189, 189
        dark:
            mush-rgb-disabled: 111, 111, 111

gfandrea · September 23, 2022, 8:59am

Thank you,

I have tryied to change those colors, but nothing changed…

It is enought to use the service “reload theme”?

rhysb · September 23, 2022, 9:06am

Just tested and works for me with a reload.

gfandrea · September 23, 2022, 9:07am

I can see that now is not even using the color 111, 111, 111, but pure white.
I will reload HA and come back…

gfandrea · September 23, 2022, 9:23am

Nothing, I can change theme, update theme, but it not using the color 111, 111, 111,
@rhysb can you shere yout theme yaml?

Thank you

Dirkdejong81 · September 23, 2022, 9:38am

Got it work

freibiergesicht · September 23, 2022, 9:41am

Nice. Wanna share the code?

flemmingss · September 23, 2022, 9:41am

how?^…

rhysb · September 23, 2022, 9:48am

Sure, here you go:

Mushroom Custom:
    # HA variables
    ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
    ha-card-border-radius: 20px
    #dialog-backdrop-filter: blur(1px)
    #card-mod-theme: "Mushroom Custom"

    # Mushroom layout
    #mush-spacing: 12px
    # Title
    #mush-title-padding: 24px 12px 16px
    #mush-title-spacing: 12px
    #mush-title-font-size: 24px
    #mush-title-font-weight: normal
    #mush-title-line-height: 1.2
    # Subtitle
    #mush-subtitle-font-size: 16px
    #mush-subtitle-font-weight: normal
    #mush-subtitle-line-height: 1.2
    # Card
    #mush-card-primary-font-size: 14px
    #mush-card-secondary-font-size: 12px
    #mush-card-primary-font-weight: bold
    #mush-card-secondary-font-weight: bolder
    #mush-card-primary-line-height: 1.5
    #mush-card-secondary-line-height: 1.5
    # Chip
    #mush-chip-spacing: 8px
    #mush-chip-padding: 0 0.25em
    #mush-chip-height: 36px
    #mush-chip-border-radius: 18px
    #mush-chip-font-size: 0.3em
    #mush-chip-font-weight: bold
    #mush-chip-icon-size: 0.5em
    #mush-chip-avatar-padding: 0.1em
    #mush-chip-avatar-border-radius: 50%
    #mush-chip-box-shadow: var(--ha-card-box-shadow)
    #mush-chip-background: var(--ha-card-background)
    # Control
    #mush-control-border-radius: 12px
    #mush-control-height: 42px
    #mush-control-button-ratio: 1
    #mush-control-icon-size: 0.5em
    # Slider
    #mush-slider-threshold: 10
    # Badge
    #mush-badge-size: 16px
    mush-badge-icon-size: 0.8em
    #mush-badge-border-radius: 50%
    # Icon
    #mush-icon-border-radius: 12px
    #mush-icon-size: 42px
    #mush-icon-symbol-size: 0.5em
    # Colors
    mush-rgb-red: 244, 67, 54
    mush-rgb-pink: 233, 30, 99
    mush-rgb-purple: 156, 39, 176
    mush-rgb-deep-purple: 103, 58, 183
    mush-rgb-indigo: 63, 81, 181
    mush-rgb-blue: 33, 150, 243
    mush-rgb-light-blue: 3, 169, 244
    mush-rgb-cyan: 0, 188, 212
    mush-rgb-teal: 0, 150, 136
    mush-rgb-green: 76, 175, 80
    mush-rgb-light-green: 139, 195, 74
    mush-rgb-lime: 205, 220, 57
    mush-rgb-yellow: 255, 235, 59
    mush-rgb-amber: 255, 193, 7
    mush-rgb-orange: 255, 152, 0
    mush-rgb-deep-orange: 255, 87, 34
    mush-rgb-brown: 121, 85, 72
    mush-rgb-grey: 158, 158, 158
    mush-rgb-blue-grey: 96, 125, 139
    mush-rgb-black: 0, 0, 0
    mush-rgb-white: 255, 255, 255
        
    #mush-rgb-info: var(--mush-rgb-blue)
    #mush-rgb-success: var(--mush-rgb-green)
    #mush-rgb-warning: var(--mush-rgb-orange)
    #mush-rgb-danger: var(--mush-rgb-red)

    mush-rgb-state-fan: var(--mush-rgb-teal)
    mush-rgb-state-light: var(--mush-rgb-amber)
    #mush-rgb-state-entity: var(--mush-rgb-blue)
    #mush-rgb-state-switch: bg-color
    #mush-rgb-state-media-player: var(--mush-rgb-green)

    #mush-rgb-state-alarm-disarmed: var(--mush-rgb-info)
    #mush-rgb-state-alarm-armed: var(--mush-rgb-success)
    #mush-rgb-state-alarm-triggered: var(--mush-rgb-danger)

    #mush-rgb-state-person-home: var(--mush-rgb-success)
    #mush-rgb-state-person-not-home: var(--mush-rgb-danger)
    #mush-rgb-state-person-zone: var(--mush-rgb-info)
    #mush-rgb-state-person-unknown: var(--mush-rgb-grey)
    
    #mush-rgb-state-cover-open: var(--mush-rgb-blue)
    #mush-rgb-state-cover-closed: var(--mush-rgb-disabled)
    
    #mush-rgb-state-climate-auto: var(--mush-rgb-green)
    #mush-rgb-state-climate-cool: var(--mush-rgb-blue)
    #mush-rgb-state-climate-dry: var(--mush-rgb-amber)
    #mush-rgb-state-climate-fan-only: var(--mush-rgb-teal)
    #mush-rgb-state-climate-heat: var(--mush-rgb-deep-orange)
    #mush-rgb-state-climate-heat-cool: var(--mush-rgb-green)
    #mush-rgb-state-climate-idle: var(--mush-rgb-grey)
    #mush-rgb-state-climate-off: var(--mush-rgb-disabled)

    # Fonts
    primary-font-family: 'Open Sans, sans-serif'
    paper-font-common-base_-_font-family: "var(--primary-font-family)"
    paper-font-common-code_-_font-family: "var(--primary-font-family)"
    paper-font-body1_-_font-family: "var(--primary-font-family)"
    paper-font-subhead_-_font-family: "var(--primary-font-family)"
    paper-font-headline_-_font-family: "var(--primary-font-family)"
    paper-font-caption_-_font-family: "var(--primary-font-family)"
    paper-font-title_-_font-family: "var(--primary-font-family)"
    ha-card-header-font-family: "var(--primary-font-family)"

    # You must keep this to support light/dark theme
    modes:
        light: 
            mush-rgb-disabled: 189, 189, 189
        dark:
            mush-rgb-disabled: 111, 111, 111

    #card-mod-card: |
        #ha-card:active {
            #transform: scale(1.02);
        #}

Dirkdejong81 · September 23, 2022, 9:49am

Hi,

First you need to install the: browser_mod.popup
you should read it how to, because you need to refresh sometimes the page ect.

for the grafiek, i made a input_numer:so you can change the time-span of the graph with 24hours. to a max of 744 hours.
this input number i did make:

temperature_graph_hours:
  name: grafiek
  initial: 24
  min: 24
  max: 744
  mode: box
  step: 24

the code of just he garage:

type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
  horizontal: true
  cards:
  - type: custom:mushroom-template-card
    secondary: >-
    {{ states.sensor.garage_temperature.state }} °C / {{
    states.sensor.garage_humidity.state }} %
    icon: mdi:car-back
    icon_color: blue
    multiline_secondary: true
    primary: Garage
    tap_action:
    action: fire-dom-event
    browser_mod:
    service: browser_mod.popup
    data:
    title: Garage
    content:
    type: custom:vertical-stack-in-card
    horizontal: false
    cards:
    - type: custom:config-template-card
    entities:
    - input_number.temperature_graph_hours
    card:
    type: horizontal-stack
    cards:
    - type: custom:config-template-card
    entities:
    - input_number.temperature_graph_hours
    card:
    type: custom:mini-graph-card
    entities:
    - sensor.garage_temperature
    hours_to_show: >-
    ${states[“input_number.temperature_graph_hours”].state}
    points_per_hour: 1
    line_width: 4
    font_size: 70
    line_color: lightblue
    align_state: center
    show:
    name: false
    average: true
    extrema: true
    labels_secondary: false
    - type: custom:config-template-card
    entities:
    - input_number.temperature_graph_hours
    card:
    type: custom:mini-graph-card
    entities:
    - sensor.garage_humidity
    hours_to_show: >-
    ${states[“input_number.temperature_graph_hours”].state}
    points_per_hour: 1
    line_width: 4
    font_size: 70
    align_state: center
    show:
    name: false
    average: true
    extrema: true
    - type: custom:mushroom-light-card
    entity: light.garage
    fill_container: false
    use_light_color: false
    show_brightness_control: true
    primary_info: none
    show_color_temp_control: false
    layout: horizontal
    - type: entities
    show_header_toggle: false
    entities:
    - entity: input_number.temperature_graph_hours
    type: custom:numberbox-card
    icon: mdi:poll
    unit: h
  - type: custom:mushroom-light-card
    entity: light.garage
    primary_info: none
    fill_container: true
    use_light_color: true
    show_brightness_control: true
    show_color_temp_control: false
    show_color_control: false
    layout: horizontal

gfandrea · September 23, 2022, 10:05am

Even with you theme, I still see the chips icon pure white
Don’t know where to look now…