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

[FedeL16 (Federico)]

Last problem: now it’s not top fixed!

Could I do?

[MangoMC (Marco Jaekel)]

Yes. Or just send me your whole theme file.

[weemaba999 (Bart Weemaels)]

Really like your setup, is it possible to share your code ?

Thanks in advance !

Kr,

Bart

[hazio]

How do I go abouts increasing the mushroom-badge-icon size? thanks

[miketarg]

I so sorry to bother you.

I am having real difficulty in getting any of these to work.

The only icons I can get to animate are the fan and the media player entitys.

The switch entity won’t animate.

I feel very silly as I know I must be doing something wrong, but. I have no idea what it is?

Thanks in advance

This is my code:-

type: custom:mushroom-template-card
icon: mdi:microwave
icon_color: blue
primary: Microwave
entity: switch.microwave_switch
card_mod:
style:
mushroom-shape-icon$: |
ha-icon:before {
content: “”;
position: absolute;
width: 25%;
height: 25%;
margin: 10%;
animation: cook 1s linear infinite;
}
@keyframes cook {
0%, 100% { background: linear-gradient(90deg, white 0%, transparent 50%, transparent 100%); }
33% { background: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%); }
66% { background: linear-gradient(90deg, transparent 0%, transparent 50%, white 100%); }
}

[dimitri.landerloos]

Please learn to format your code. Check the thread below:

How to help us help you - or How to ask a good question

Before we begin… This forum is not a helpdesk The people here don’t work for Home Assistant, that’s an open source project. We are volunteering our free time to help others. Not all topics may get an answer, never mind one that helps you solve your problem. [image] This also isn’t a general home automation forum, this is a forum for Home Assistant and things related to it. Any question about Home Assistant, and about using things with Home Assistant, is welcome here. We can’t help you with e…

Specifically section 11.

[dimitri.landerloos]

You can do it with card mod. Have a look in the guide linked in my profile.

[NovaG]

I’m just using the MiniHass theme

---
####################### LIGHT MODE ####################
MiniHass_Light:
  # contrast
  contrast-0: "#ffffff"
  contrast-10: "#F2F2F2"
  contrast-20: "#e5e5e5"
  contrast-33: "#888888"
  contrast-66: "#444444"
  contrast-100: "#000000"

  # main interface colors
  color-green: "#39bb4f"
  hcv-color-new: "#39bb4f"
  color-yellow: rgb(253 204 18)
  color-blue: rgba(159,204,250,1)
  color-cerise: "#e0188f"
  color-purple: rgba(130,30,255)
  color-orange: "#F46036"
  color-off-grey: "#525252"
  color-red: "#E84941"
  color-teal: rgba(123,232,183,1)
  color-white: "#ffffff"
  color-off-white: "#fffff2"
  color-black: "#000000"
  
  gradient-yellow: linear-gradient(30deg, rgb(253 204 18) 0%, rgb(253 238 70) 100%)
  gradient-green: linear-gradient(120deg, rgba(120,210,155,1), rgba(205,240,200,1))
  gradient-red: linear-gradient(45deg, rgba(240,130,140,1), rgba(250,185,195,1))
  gradient-grey-cold: linear-gradient(45deg, rgba(235,244,245,1), rgba(181,198,224,1))
  gradient-blue: linear-gradient(45deg, rgba(9,116,241,1), rgba(159,204,250,1))
  gradient-orange: linear-gradient(45deg, rgba(253,125,90,1), rgba(253,172,90,1))
  gradient-teal: linear-gradient(45deg, rgba(123,232,183,1), rgba(123,232,218,1))
  gradient-purple: linear-gradient(120deg, rgb(130,30,255), rgb(170,100,250))
  gradient-purple-teal: 'linear-gradient(45deg, var(--color-purple), var(--color-teal))'
  gradient-teal-purple: 'linear-gradient(45deg, var(--color-teal), var(--color-purple))'
  gradient-black: linear-gradient(45deg, rgba(13,13,15,1), rgba(19,20,23,1))

  #glow
  glow: 0px 0px 0px 0px
  glow-color-green: 'var(--glow) var(--color-green)'
  glow-color-yellow: 'var(--glow) var(--color-yellow)'
  glow-color-dark-blue: 'var(--glow) var(--color-dark-blue)'
  glow-color-light-blue: 'var(--glow) var(--color-light-blue)'
  glow-color-cerise: 'var(--glow) var(--color-cerise)'
  glow-color-violet: 'var(--glow) var(--color-violet)'
  glow-color-orange: 'var(--glow) var(--color-orange)'
  glow-color-red: 'var(--glow) var(--color-red)'
  glow-color-white: 'var(--glow) var(--color-white)'

  # background and sidebar
  background: '#FFFFFF'

  # card
  background-neo: linear-gradient(145deg, rgba(250,250,250,.5) 25%, rgba(50,50,50,.1))
  box-shadow-neo: 5px 5px 10px rgba(50,50,50,.15), -5px -5px 10px rgba(255,255,255,.5)
  border-width: "0px"
  border-radius: "16px"
  box-shadow: "none"
  ha-card-box-shadow: "var(--box-shadow)"
  ha-card-background: '#F4F4F4'
  background-card-color: 'rgba(14,14,112, 0)'
  ha-card-border-width: "var(--border-width)"

  # Slider

  slider-bar-color: '#7ED8FC'
  slider-color: '#00468c'
  slider-secondary-color: "var(--color-orange)"
  
  # UI
  mdc-button-outline-color: "var(--color-orange)"
  mdc-theme-primary: "var(--color-red)"
  --energy-grid-consumption-color: "var(--color-red)"
  --energy-grid-return-color: "var(--color-red)"
  --energy-solar-color: "var(--color-red)"
  energy-non-fossil-color: "var(--color-red)"
  energy-battery-out-color: "var(--color-red)"
  energy-battery-in-color: "var(--color-red)"
  --energy-gas-color: "var(--color-red)"

  mini-media-player-accent-color: "var(--color-white)"
  mini-media-player-icon-color: "var(--color-white)"
  mini-media-player-base-color: "var(--color-white)"
  swiper-pagination-color: "var(--color-black)"

  #Typography (static)
  fs-xl: 4rem
  fs-1000: 2.5rem
  fs-800: 2rem
  fs-600: 1.5rem
  fs-500: 1.25rem
  fs-400: 1rem
  fs-300: 0.75rem
  fs-200: 0.5rem

  #Buttons (static)
  button-small: 30px

  #Typography (responsive)
  #fs-xl: clamp(4rem, 4vw, 8rem)
  #fs-1000: clamp(2.5rem, 2vw, 4rem)
  #fs-800: clamp(2rem, 2vw, 3rem)
  #fs-600: clamp(1.5rem, 2vw, 2.25rem)
  #fs-500: clamp(1.25rem, 2vw, 2.25rem)
  #fs-400: clamp(1rem, 1vw, 2rem)
  #fs-300: clamp(0.75rem, 2vw, 1.25rem)
  #fs-200: clamp(0.5rem, 2vw, 1rem)

  #Buttons (responsive)
  #button-small: clamp(30px, 2vw, 50px)

####################### Backend UI ####################
####################### MACHIATO ####################
  # Colors
  text: "#fdfdff"
  subtext1: "#dcdcde"
  subtext0: "#e6e7eb"

  overlay2: "#939ab7"
  overlay1: "#8087a2"
  overlay0: "#6e738d"

  surface2: "#5b6078"
  surface1: "#494d64"
  surface0: "#363a4f"

  base: "#24273a"
  mantle: "#1e2030"
  crust: "#181926"

  rosewater: "#f4dbd6"
  flamingo: "#f0c6c6"
  pink: "#f5bde6"
  mauve: "#c6a0f6"
  red: "#ed8796"
  maroon: "#ee99a0"
  peach: "#f5a97f"
  yellow: "#eed49f"
  green: "#a6da95"
  teal: "#8bd5ca"
  sky: "#91d7e3"
  sapphire: "#7dc4e4"
  blue: "#8aadf4"
  lavender: "#b7bdf8"

  # Black / White
  black: "#000000"
  white: "#FFFFFF"
  # Colors
  purple: rgb(var(--purple-rgb))
  yellow: rgb(var(--yellow-rgb))
  orange: rgb(var(--orange-rgb))
  red: rgb(var(--red-rgb))
  green: rgb(var(--green-rgb))
  blue: rgb(var(--blue-rgb))
  # Color tints
  purple-tint: rgba(var(--purple-rgb),var(--color-tint))
  yellow-tint: rgba(var(--yellow-rgb),var(--color-tint))
  orange-tint: rgba(var(--orange-rgb),var(--color-tint))
  red-tint: rgba(var(--red-rgb),var(--color-tint))
  green-tint: rgba(var(--green-rgb),var(--color-tint))
  blue-tint: rgba(var(--blue-rgb),var(--color-tint))
  # Gradients
  brightness: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.4) 0%, rgba(var(--brightness-high-rgb), 1) 100%)
  brightness-tint: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.06) 0%, rgba(var(--brightness-high-rgb), var(--color-tint)) 100%)
  temperature: linear-gradient(90deg, rgba(var(--temperature-low-rgb), 01) 0%, rgba(var(--temperature-high-rgb), 1) 100%)
  temperature-tint: linear-gradient(90deg, rgba(var(--temperature-low-rgb), var(--color-tint)) 0%, rgba(var(--temperature-high-rgb), var(--color-tint)) 100%)

  ###########################

  # Header
  app-header-background-color: var(--mantle)
  app-header-text-color: var(--text)

  # Main Interface colors
  primary-color: var(--white)
  light-primary-color: var(--primary-color)

  primary-background-color: var(--base)
  secondary-background-color: var(--base)

  # Text
  primary-text-color: var(--text)
  secondary-text-color: var(--subtext1)
  text-primary-color: var(--text)
  divider-color: var(--base)
  accent-color: var(--sky)
  disabled-text-color: var(--surface0)

  # Sidebar
  sidebar-background-color: var(--crust)
  sidebar-selected-background-color: var(--primary-background-color)

  sidebar-icon-color: var(--subtext0)
  sidebar-text-color: var(--subtext0)
  sidebar-selected-icon-color: var(--blue)
  sidebar-selected-text-color: var(--blue)

  # Buttons
  paper-item-icon-color: var(--subtext0)
  paper-item-icon-active-color: var(--primary-color)

  # States and Badges
  state-icon-color: var(--white)
  state-icon-active-color: var(--primary-color)

  state-icon-unavailable-color: var(--disabled-text-color)

  # Sliders
  paper-slider-knob-color: var(--blue)
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--blue)

  # Labels
  label-badge-background-color: var(--surface0)
  label-badge-text-color: var(--text)
  label-badge-red: var(--red)
  label-badge-green: var(--green)
  label-badge-blue: var(--blue)
  label-badge-yellow: var(--yellow)
  label-badge-gray: var(--overlay0)

  # Cards

  paper-dialog-background-color: var(--overlay0)
  paper-listbox-background-color: var(--overlay0)
  paper-card-background-color: var(--card-background-color)

  # Switches
  switch-checked-button-color: var(--green)
  switch-checked-track-color: var(--surface0)
  switch-unchecked-button-color: rgb(--overlay0)
  switch-unchecked-track-color: rgb(--surface0)
  # Toggles
  paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
  paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
  paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)

  # Table
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  data-table-background-color: var(--primary-background-color)
  mdc-checkbox-unchecked-color: var(--surface0)

  # Dropdowns
  material-background-color: var(--primary-background-color)
  material-secondary-background-color: var(--primary-background-color)
  mdc-theme-surface: var(--primary-background-color)

  # Pre/Code
  markdown-code-background-color: var(--surface0)

  # Checkboxes
  mdc-select-fill-color: var(--surface0)
  mdc-select-ink-color: var(--primary-text-color)
  mdc-select-label-ink-color: var(--subtext1)
  mdc-select-idle-line-color: var(--primary-text-color)
  mdc-select-dropdown-icon-color: var(--secondary-text-color)
  mdc-select-hover-line-color: var(--accent-color)

  # Input
  input-fill-color: var(--secondary-background-color)
  input-dropdown-icon-color: var(--secondary-text-color)
  input-ink-color: var(--primary-text-color)
  input-label-ink-color: var(--secondary-text-color)
  input-idle-line-color: var(--primary-text-color)
  input-hover-line-color: var(--accent-color)

  # Toast
  paper-toast-background-color: var(--overlay0)

  # Colors
  error-color: var(--red)
  warning-color: var(--yellow)
  success-color: var(--green)
  info-color: var(--blue)

  state-on-color: var(--green)
  state-off-color: var(--red)


####################### DARK MODE ####################
MiniHass_Dark:

  lovelace-background: 'center / cover no-repeat url("/local/images/bg1.jpg") fixed'

  # contrast
  contrast-100: rgb(255,255,255)
  contrast-66: rgb(136,136,136)
  contrast-33: rgb(68,68,68)
  contrast-20: rgb(30,30,30)
  contrast-10: rgb(17,17,17)
  contrast-0: rgb(0,0,0)

  # colors
  color-green: rgb(57,187,79)
  color-yellow: rgb(253 204 18)
  color-blue: rgb(159,204,250)
  color-cerise: rgb(224,24,143)
  color-purple: rgb(130,30,255)
  color-orange: rgb(244,96,54)
  color-off-grey: rgb(82,82,82)
  color-red: rgb(232,73,65)
  color-teal: rgb(123,232,183,1)
  color-white: rgb(255,255,255)
  color-black: rgb(0,0,0)
  gradient-yellow: linear-gradient(30deg, rgb(253 204 18) 0%, rgb(253 238 70) 100%)
  gradient-green: linear-gradient(120deg, rgba(120,210,155,1), rgba(205,240,200,1))
  gradient-red: linear-gradient(45deg, rgba(240,130,140,1), rgba(250,185,195,1))
  gradient-grey-cold: linear-gradient(45deg, rgba(235,244,245,1), rgba(181,198,224,1))
  gradient-blue: linear-gradient(45deg, rgba(9,116,241,1), rgba(159,204,250,1))
  gradient-orange: linear-gradient(45deg, rgba(253,125,90,1), rgba(253,172,90,1))
  gradient-teal: linear-gradient(45deg, rgba(123,232,183,1), rgba(123,232,218,1))
  gradient-purple: linear-gradient(120deg, rgb(130,30,255), rgb(170,100,250))
  gradient-purple-teal: 'linear-gradient(45deg, var(--color-purple), var(--color-teal))'
  gradient-teal-purple: 'linear-gradient(45deg, var(--color-teal), var(--color-purple))'
  gradient-black: linear-gradient(45deg, rgba(13,13,15,1), rgba(19,20,23,1))

  #glow
  glow: 0px 0px 15px 1px
  glow-color-green: 'var(--glow) var(--color-green)'
  glow-color-yellow: 'var(--glow) var(--color-yellow)'
  glow-color-dark-blue: 'var(--glow) var(--color-dark-blue)'
  glow-color-light-blue: 'var(--glow) var(--color-light-blue)'
  glow-color-cerise: 'var(--glow) var(--color-cerise)'
  glow-color-violet: 'var(--glow) var(--color-violet)'
  glow-color-orange: 'var(--glow) var(--color-orange)'
  glow-color-red: 'var(--glow) var(--color-red)'
  glow-color-white: 'var(--glow) var(--color-white)'

  # background and sidebar
  background: '#1b1d21'

  # card
  box-shadow-neo: 5px 5px 10px rgba(0,0,0,.5), -5px -5px 10px rgba(255,255,255,.03)

  border-width: "0px"
  border-radius: "16px"
  box-shadow: "none"

  ha-card-box-shadow: "var(--box-shadow)"
  ha-card-background: '#121316'
  ha-card-border-radius: "var(--border-radius)"
  background-card-color: 'rgba(14,14,112, 0)'
  ha-card-border-width: "var(--border-width)"

  # slider
  slider-bar-color: '#7ED8FC'
  slider-color: '#4200AA'
  slider-secondary-color: "var(--color-orange)"

  # media player
  mini-media-player-accent-color: "var(--color-white)"
  mini-media-player-icon-color: "var(--color-white)"
  mini-media-player-base-color: "var(--color-white)"

  #Typography (static)
  fs-xl: 4rem
  fs-1000: 2.5rem
  fs-800: 2rem
  fs-600: 1.5rem
  fs-500: 1.25rem
  fs-400: 1rem
  fs-300: 0.75rem
  fs-200: 0.5rem

  #Buttons (static)
  button-small: 30px

  #Typography (responsive)
  #fs-xl: clamp(4rem, 4vw, 8rem)
  #fs-1000: clamp(2.5rem, 2vw, 4rem)
  #fs-800: clamp(2rem, 2vw, 3rem)
  #fs-600: clamp(1.5rem, 2vw, 2.25rem)
  #fs-500: clamp(1.25rem, 2vw, 2.25rem)
  #fs-400: clamp(1rem, 1vw, 2rem)
  #fs-300: clamp(0.75rem, 2vw, 1.25rem)
  #fs-200: clamp(0.5rem, 2vw, 1rem)

  #Buttons (responsive)
  #button-small: clamp(30px, 2vw, 50px)

####################### Backend UI ####################
####################### MACHIATO ####################
  # Colors
  text: "#f7f7f7"
  subtext1: "#cccccc"
  subtext0: "#aaaaaa"

  overlay2: "#939ab7"
  overlay1: "#8087a2"
  overlay0: "#6e738d"

  surface2: "#5b6078"
  surface1: "#494d64"
  surface0: "#363a4f"

  base: "#24273a"
  mantle: "#1e2030"
  crust: "#181926"

  rosewater: "#f4dbd6"
  flamingo: "#f0c6c6"
  pink: "#f5bde6"
  mauve: "#c6a0f6"
  red: "#ed8796"
  maroon: "#ee99a0"
  peach: "#f5a97f"
  yellow: "#eed49f"
  green: "#7cc963"
  teal: "#8bd5ca"
  sky: "#91d7e3"
  sapphire: "#7dc4e4"
  blue: "#8aadf4"
  lavender: "#b7bdf8"

  ###########################

  # Header
  app-header-background-color: var(--mantle)
  app-header-text-color: var(--text)

  # Main Interface colors
  primary-color: var(--blue)
  light-primary-color: var(--primary-color)

  primary-background-color: var(--base)
  secondary-background-color: var(--base)

  # Text
  primary-text-color: var(--text)
  secondary-text-color: var(--subtext1)
  text-primary-color: var(--text)
  divider-color: var(--base)
  accent-color: var(--sky)
  disabled-text-color: var(--surface0)

  # Sidebar
  sidebar-background-color: var(--crust)
  sidebar-selected-background-color: var(--primary-background-color)

  sidebar-icon-color: var(--subtext0)
  sidebar-text-color: var(--subtext0)
  sidebar-selected-icon-color: var(--blue)
  sidebar-selected-text-color: var(--blue)

  # Buttons
  paper-item-icon-color: var(--subtext0)
  paper-item-icon-active-color: var(--primary-color)

  # States and Badges
  state-icon-color: var(--white)
  state-icon-active-color: var(--primary-color)

  state-icon-unavailable-color: var(--disabled-text-color)

  # Sliders
  paper-slider-knob-color: var(--blue)
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--blue)

  # Labels
  label-badge-background-color: var(--surface0)
  label-badge-text-color: var(--text)
  label-badge-red: var(--red)
  label-badge-green: var(--green)
  label-badge-blue: var(--blue)
  label-badge-yellow: var(--yellow)
  label-badge-gray: var(--overlay0)

  # Cards

  paper-dialog-background-color: var(--overlay0)
  paper-listbox-background-color: var(--overlay0)
  paper-card-background-color: var(--card-background-color)

  # Switches
  switch-checked-button-color: var(--green)
  switch-checked-track-color: var(--surface0)
  switch-unchecked-button-color: rgb(--overlay0)
  switch-unchecked-track-color: rgb(--surface0)
  # Toggles
  paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
  paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
  paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)

  # Table
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  data-table-background-color: var(--primary-background-color)
  mdc-checkbox-unchecked-color: var(--surface0)

  # Dropdowns
  material-background-color: var(--primary-background-color)
  material-secondary-background-color: var(--primary-background-color)
  mdc-theme-surface: var(--primary-background-color)

  # Pre/Code
  markdown-code-background-color: var(--surface0)

  # Checkboxes
  mdc-select-fill-color: var(--surface0)
  mdc-select-ink-color: var(--primary-text-color)
  mdc-select-label-ink-color: var(--subtext1)
  mdc-select-idle-line-color: var(--primary-text-color)
  mdc-select-dropdown-icon-color: var(--secondary-text-color)
  mdc-select-hover-line-color: var(--accent-color)

  # Input
  input-fill-color: var(--secondary-background-color)
  input-dropdown-icon-color: var(--secondary-text-color)
  input-ink-color: var(--primary-text-color)
  input-label-ink-color: var(--secondary-text-color)
  input-idle-line-color: var(--primary-text-color)
  input-hover-line-color: var(--accent-color)

  # Toast
  paper-toast-background-color: var(--overlay0)

  # Colors
  error-color: var(--red)
  warning-color: var(--yellow)
  success-color: var(--green)
  info-color: var(--blue)

  state-on-color: var(--green)
  state-off-color: var(--red)


  #######################################################
  ############### Custom global variables ###############
  #######################################################

  # Black / White
  black: "#000000"
  white: "#FFFFFF"
  # Colors
  purple: rgb(var(--purple-rgb))
  yellow: rgb(var(--yellow-rgb))
  orange: rgb(var(--orange-rgb))
  red: rgb(var(--red-rgb))
  green: rgb(var(--green-rgb))
  blue: rgb(var(--blue-rgb))
  # Color tints
  purple-tint: rgba(var(--purple-rgb),var(--color-tint))
  yellow-tint: rgba(var(--yellow-rgb),var(--color-tint))
  orange-tint: rgba(var(--orange-rgb),var(--color-tint))
  red-tint: rgba(var(--red-rgb),var(--color-tint))
  green-tint: rgba(var(--green-rgb),var(--color-tint))
  blue-tint: rgba(var(--blue-rgb),var(--color-tint))
  # Gradients
  brightness: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.4) 0%, rgba(var(--brightness-high-rgb), 1) 100%)
  brightness-tint: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.06) 0%, rgba(var(--brightness-high-rgb), var(--color-tint)) 100%)
  temperature: linear-gradient(90deg, rgba(var(--temperature-low-rgb), 01) 0%, rgba(var(--temperature-high-rgb), 1) 100%)
  temperature-tint: linear-gradient(90deg, rgba(var(--temperature-low-rgb), var(--color-tint)) 0%, rgba(var(--temperature-high-rgb), var(--color-tint)) 100%)
  # Color RGB variables
  purple-rgb: 239, 177, 255
  yellow-rgb: 255, 218, 120
  orange-rgb: 255, 181, 129
  red-rgb: 255, 145, 138
  green-rgb: 204, 233, 161
  blue-rgb: 144, 191, 255
  # Gradient RGB variables
  brightness-low-rgb: 232, 176, 29
  brightness-high-rgb: 255, 211, 94
  temperature-low-rgb: 177, 197, 255
  temperature-high-rgb: 255, 175, 131
  # Contrast variables
  black1: "#000000"
  black2: "#111318"
  black3: "#171A21"
  black4: "#1C1F27"
  black5: "#262A35"
  black6: "#353946"
  black7: "#434856"
  black8: "#535865"
  black9: "#636774"
  black10: "#777A83"
  white10: "#898C94"
  white9: "#969AA6"
  white8: "#A4A9B6"
  white7: "#B3B8C6"
  white6: "#C3C8D5"
  white5: "#D4D8E2"
  white4: "#E1E5EF"
  white3: "#EAEDF6"
  white2: "#F4F6FB"
  white1: "#FFFFFF"

  ########################################################
  ############### Variables based on modes ###############
  ########################################################

  modes:
    dark:
      # Black white contrats
      contrast1: var(--black1)
      contrast2: var(--black2)
      contrast3: var(--black3)
      contrast4: var(--black4)
      contrast5: var(--black5)
      contrast6: var(--black6)
      contrast7: var(--black7)
      contrast8: var(--black8)
      contrast9: var(--black9)
      contrast10: var(--black10)
      contrast11: var(--white10)
      contrast12: var(--white9)
      contrast13: var(--white8)
      contrast14: var(--white7)
      contrast15: var(--white6)
      contrast16: var(--white5)
      contrast17: var(--white4)
      contrast18: var(--white3)
      contrast19: var(--white2)
      contrast20: var(--white1)
      # Color tint transparancy
      color-tint: "0.15"
      # Contrast RGB variables
      contrast1-RGB: 0,0,0

    light:
      # Black white contrats
      contrast1: var(--white1)
      contrast2: var(--white2)
      contrast3: var(--white3)
      contrast4: var(--white4)
      contrast5: var(--white5)
      contrast6: var(--white6)
      contrast7: var(--white7)
      contrast8: var(--white8)
      contrast9: var(--white9)
      contrast10: var(--white10)
      contrast11: var(--black10)
      contrast12: var(--black9)
      contrast13: var(--black8)
      contrast14: var(--black7)
      contrast15: var(--black6)
      contrast16: var(--black5)
      contrast17: var(--black4)
      contrast18: var(--black3)
      contrast19: var(--black2)
      contrast20: var(--black1)
      # Color tint transparancy
      color-tint: "0.20"
      # Contrast RGB variables
      contrast1-RGB: 255,255,255

[TheCrey]

Hi there,

i hope you are all fine.
I am getting a little lost here.
There is no much experience from my side regarding this so i tried a lot an read more.

But i am still lost, all i want is to change the font size ob the mushroom title card via the card-mod.
It would be nicer to make the icons smaller too but this is not important, as i am sure i am to do so, if i figured out how to change the font size.

Here ist the yaml code:
As i mentioned i would like to have the words: " Gäste-WC" , " Badezimmer" und “Küche” much smaller, so there will be no gap between the buttons at all

Any ideas or hints on how to accomplish that ?
Thanks in advance

p.s the card-mod hacs integration is installed and it does work in generell.

square: false
type: grid
cards:
  - square: false
    type: grid
    cards:
      - type: custom:mushroom-title-card
        title: Lüftersteuerung
        alignment: center
        title_tap_action:
          action: none
        subtitle_tap_action:
          action: none
    columns: 1
  - square: false
    type: grid
    cards:
      - type: custom:mushroom-title-card
        title: 'Gäste-WC '
        title_tap_action:
          action: none
        subtitle_tap_action:
          action: none
      - type: custom:mushroom-entity-card
        entity: switch.gwc_luefter_stufe_1
        name: '1'
        icon: mdi:fan-speed-1
        layout: vertical
        tap_action:
          action: toggle
        hold_action:
          action: none
        double_tap_action:
          action: none
        secondary_info: none
        primary_info: none
      - type: custom:mushroom-entity-card
        entity: switch.gwc_luefter_stufe_2
        name: '2'
        icon: mdi:fan-speed-2
        secondary_info: none
        layout: vertical
        primary_info: none
        tap_action:
          action: toggle
        hold_action:
          action: none
        double_tap_action:
          action: none
    columns: 3
  - square: false
    type: grid
    cards:
      - type: custom:mushroom-title-card
        title: Badezimmer
      - type: custom:mushroom-entity-card
        entity: switch.luefter_badezimmer_switch_1
        icon: mdi:fan-speed-1
        layout: vertical
        primary_info: none
        secondary_info: none
        tap_action:
          action: toggle
        hold_action:
          action: none
        double_tap_action:
          action: none
      - type: custom:mushroom-entity-card
        entity: switch.luefter_badezimmer_switch_2
        icon: mdi:fan-speed-2
        layout: vertical
        primary_info: none
        secondary_info: none
        tap_action:
          action: toggle
        hold_action:
          action: none
        double_tap_action:
          action: none
  - square: false
    type: grid
    cards:
      - type: custom:mushroom-title-card
        title: Küche
      - type: custom:mushroom-entity-card
        entity: switch.luefter_kueche_switch_0
        icon: mdi:fan-speed-1
        layout: vertical
        primary_info: none
        secondary_info: none
        tap_action:
          action: toggle
        hold_action:
          action: none
        double_tap_action:
          action: none
      - type: custom:mushroom-entity-card
        entity: switch.luefter_kueche_switch_1
        icon: mdi:fan-speed-2
        layout: vertical
        primary_info: none
        secondary_info: none
        tap_action:
          action: toggle
        hold_action:
          action: none
        double_tap_action:
          action: none
columns: 1

[dimitri.landerloos]

Solution below. For beginners with card mod the guide in my profile will help.

@dimitri.landerloos

Change Font Size.

I have not found a way to change font size for text accross the board. you have to do them individually it seems.

card_mod:
  style: |
    ha-card {
      --title-font-size: 40px !important;
      --subtitle-font-size: 10px !important;
    }

[cklit]

That is a good looking card! Thanks for sharing!

[TheCrey]

Hi, that worked perfectly fine thanks.
Also thanks for you detailed.
I tried to resize the font of the mushroom card, as described by you, but it does not do anything there.
The Size of the card is changing but not the font.
Alone they are working, i am not getting how to combine them…

card_mod:
  style: |
    ha-card {
      height:80px !important;
      width: 80px;
    }

     mushroom-state-info$: |
    .container {
     --card-secondary-font-size: 10px;
     --card-primary-font-size: 10px;
    }

Also i have those strange gaps, any idea how i can remove them ?

[dimitri.landerloos]

Take a look at the section in the guide that says:
“What the $ and .: | symbols do”

You can only have one | in each line so your code would be like this:

card_mod:
  style: 
    mushroom-state-info$: |
      .container {
        --card-secondary-font-size: 10px;
        --card-primary-font-size: 10px;
      }
    .: |
      ha-card {
        height:80px !important;
        width: 80px;
      }

[hazio]

Thanks, I was able to adjust the badge icon size, but the badge background (--badge-size) doesn’t seem to do anything, or am I missing something?

    mushroom-badge-icon$: |
      ha-icon {
      --badge-icon-size: 20px;!important;
      --badge-size: 40px; !important;
      }

Full code:

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
      }
    mushroom-state-info$: |
      .container {
        width: 83%;
        align-items: center;
      }
    .: |
      ha-card {
        --icon-size: 50px;
        width: fit-content;
        border-radius: 100px;
      }
    mushroom-badge-icon$: |
      ha-icon {
      --badge-icon-size: 20px; !important
      --badge-size: 40px; !important;
      }

[dimitri.landerloos]

Try like this:

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
      }
    mushroom-state-info$: |
      .container {
        width: 83%;
        align-items: center;
      }
    .: |
      ha-card {
        --icon-size: 50px;
        width: fit-content;
        border-radius: 100px;
      }
      mushroom-badge-icon {
        --badge-icon-size: 20px !important;
        --badge-size: 40px !important;
      }

[hazio]

Working great, thank you!

[majdzik84]

Great job!
Is it possible to make these badges also for avatar-picture instead of icon?

[FedeL16 (Federico)]

hi dimitri, i have a question:

this is my card_mod:

 ha-card {
      overflow: visible !important;
      margin-top: calc(-1 * var(--mush-chip-spacing, 8px));
      box-shadow: none;
      border: none;
      background: none;
      padding: var(--mush-chip-spacing, 8px);
      transition: all 0.5s;
      {% if is_state('binary_sensor.ping_dalg_pc', 'on') %}
      {% elif is_state('binary_sensor.ping_dalg_dell', 'on') %}
      {% elif is_state('input_boolean.notifications', 'on') %}
      {% elif not is_state('sensor.devices_with_low_battery', '0') %}
      {% elif is_state('input_boolean.bal', 'on') %}
      {% elif is_state('calendar.anniversaire', 'on') %}
      {% elif is_state('group.grp_update_all', 'on') %}
        margin-bottom: 0px !important;
      {% else %}
        margin-bottom: 30px !important;
      {% endif %}
    }
     

    ha-card {
      max-height: calc(100vh - var(--header-height)) !important;
      overflow-y: visible !important;
      max-width: var(--masonry-column-width, 490px) !important;
    }
    :host {
      
      position: fixed !important;
      z-index: 0 !important;
      bottom: 0px !important;
      width: 100% !important;
    }

    ha-card:before {
      content: "";
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100%;
      width: calc(100% - 2 * var(--ha-card-border-width, 1px));
      z-index: -1;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 35px;
      box-shadow: var(--ha-card-box-shadow);
      border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
      {% if is_state('media_player.tutti_i_media', ['playing', 'paused']) %}
        background: linear-gradient(135deg, rgba({{ states('sensor.dark_vibrant_color') }}, 0.85), rgba({{ states('sensor.dark_muted_color') }}, 0.75));
      {% else %}
        background: rgba(var(--rgb-card-background-color), 0.20);
      {% endif %}

if i want delete the overflow and continue to use the card to fix at bottom when an input_bolean is on, and when its state as off use the code card posted, how can i do?

[dimitri.landerloos]

Should just be able to use mushroom-shape-avatar instead of ha-state-icon.

card_mod:
  style: |
    mushroom-shape-avatar::after {
      content: '{{ expand(states.light) |selectattr('state', 'eq', 'on') |selectattr('entity_id', 'in', area_entities('Trappa')) |rejectattr('entity_id', 'search', 'dz') |map(attribute='entity_id') |list | count }}';
      position: absolute;
      top: -11%;
      right: -11%;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 15px;
      height: 15px;
      font-size: 9px;
      font-weight: 700;
      {% if expand(states.light) 
        |selectattr('state', 'eq', 'on') 
        |selectattr('entity_id', 'in', area_entities('Trappa'))
        |rejectattr('entity_id', 'search', 'dz')
        |map(attribute='entity_id')
        |list | count > 0 
      %}
        background-color: rgba(var(--rgb-amber), 0.5);
      {% else %}
        background-color: rgba(var(--rgb-disabled), 0.5);       
      {% endif %}
      border-radius: 50%;
    }
    {% if states('binary_sensor.hallway_motion_sensor_occupancy') == 'off' %}
      mushroom-shape-avatar::before {
        content: 'directions_walk';
        position: absolute;
        font-family: 'Material Icons';
        top: -11%;
        left: -11%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 15px;
        height: 15px;
        font-size: 11px;
        background: rgba(var(--rgb-amber), 0.5);
        color: rgba(var(--rgb-amber), 1);
        border-radius: 50%;
        animation: blink 1s linear infinite;
      }
    {% endif %}
    @keyframes blink {
      50% {opacity: 0;}
    }

[dimitri.landerloos]

Not quite sure what you mean sorry? You dont seem to need overflow at all (at least based on the snippet you provided here).

For your question to display the card when the boolean is on just use a conditional card and place your card inside of it.