šŸ”¹ Card-mod - Super-charge your themes!

Right, but as i understand the CSS placed in the card affects the card itself which is somethimg that i dont want to do. This is why i didnt give much details about the card itself.

What i am looking for, is to adjust the view behind the card iā€™ve made. Maybe this is possible through the themeā€¦ I believe i am in the right place but as you suggest, i am gonna post my question also to the other thread.

Hi. I found something you typed on github a few years ago, regarding styling a broswer pop up card. I pasted some of your code below that you gave for the pop up box

I am desperate to figure out how to use a drop down menu that drops down further than the pop up menu.

Overflow: visible for example. But I cant figure it out, been at this for days lol. Can you please let me know if this is possible with card mod? Thank you in advance

style:
  $: |
    .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
      border-radius: 25px;
    }
  .: |
    :host {
      --mdc-theme-surface: rgba(0,0,0,0);
      --secondary-background-color: rgba(0,0,0,0.5);
      --ha-card-background: rgba(0,0,0,0.5);
    }
    :host .content {
      width: 90vw;
      height: 90vh;
     }

Someone see in this example a wrong Style Code?
My card_mod Style will be removed when i change something in the gui but he is working

  - entity: input_boolean.heizperiode
    name: Heizperiode
    icon: mdi:thermostat-box-auto
  - type: custom:mushroom-select-card
    entity: input_select.advanced_heating_control_wohnzimmer_scheduler
    name: Scheduler
    icon: mdi:calendar-month-outline
    layout: horizontal
    secondary_info: none
    card_mod:
      style: |
        ha-card {
        --ha-card-border-width: 0;
        --card-primary-font-weight: normal;
        margin-left: -13px;
        mushroom-shape-icon 
          {
          --shape-color: none;
          --icon-color: #44739e;
          }
        }

I am trying to style the new Group Headers in automation view to be bigger so I can actually see them but I am having a bit of trouble. Does anyone know what i am doing wrong?

My Theme file:

skynet_dark_v2:
  card-mod-theme: skynet_dark_v2
  card-mod-view: |
    .group-header {
      font-weight: 800;
      font-size: 18px;
      color: #FFC10A;
    }

Iā€™m trying to add simple drop-shadow effect globally to all my Home Assistant cards via my custom theme file. For some reason, when I append ha-card { box-shadow: 0px 5px 15px rgba(255,255,255,0.3) !important; } to my card-mode code below, it has no visible effect. However, the other card-mod modifications work just fine. Is there a more effective way to do this?

  card-mod-root: |
    .edit-mode, app-header, app-toolbar {
      background: var(--app-header-background-color) !important;
      color: var(--primary-text-color) !important;
    }
    ha-tabs {
      --paper-tabs-selection-bar-color: var(--primary-color) !important;
    }
    paper-tab[aria-selected=true] {
      color: var(--primary-color) !important;
    }
    ha-card {
      box-shadow: 0px 5px 15px rgba(255,255,255,0.3) !important;
    }

Iā€™m trying to change sidebar title while maintaining the style from my current theme (ios-dark-mode-dark-blue), but it always change to a default HA white theme. Something like this is possible?

my-theme:
  card-mod-theme: "ios-dark-mode-dark-blue"

  card-mod-sidebar-yaml: |
    .: |
      .menu .title {
        display: none !important;
      }
      .menu:after {
        content: "My Title";
        margin-left: 16px;
      }

wont cross-post the full discovery I did todayā€¦
but I do like to post this snippet here, because I never realized we could list card-mod classes like this:

type: entities
title: Tijd
icon: []
card_mod:
  class:
    - class-header-margin
    - class-header-icon
  style: |
    .card-header {
      {% set up = states('sun.sun') == 'above_horizon' %}
      --card-mod-icon-color: {{'gold' if up else 'var(--card-background-color)' }};
      --card-mod-icon: mdi:weather-sunset{{'-up' if up  else 'down'}};
    }
entities:

which is pretty cool, because with this, we can re-use those often used classes easily, and still have tailor made per-card settings if we need that. Without having to rewrite those in each and every card.

btw, this does Not work:

card_mod:
  class: class-header-margin, class-header-icon

Could someone share a working transparent header and bottom please?

I tried the codes here, but still see a black status bar, and background colour when scrolling to bottom, the background seems to be scrolling and not fixed as defined.

Hereā€™s my code in themes.yaml with kiosk-mode enabled:

 card-mod-root-yaml: |
    .header {
      display: none;
    }
    #view {
      padding: 0 !important;
      height: 100vh !important;
      padding-bottom: var(--header-height) !important;
    }
 # Background image
  background-image: center / cover no-repeat fixed url(/local/img/bg/blur.jpg)
  lovelace-background: var(--background-image)
  # Header:
  app-header-background-color: rgba(0, 0, 0, 0.1) 
  app-header-text-color: rgb(198, 203, 210)
  app-header-selection-bar-color: rgba(0, 0, 0, 0.1)
  app-header-edit-background-color: rgb(036, 036, 036)

Thanks

What Iā€™m doing wrong?

my_theme:

  card-mod-theme: my_theme
  card-mod-card: |
    hui-card-features$:
      hui-light-brightness-card-feature$:
        ha-control-slider {
          --control-slider-thickness: 20px !important;
        }

You need to use this. I added color to verify it is working.

  card-mod-card-yaml: |
   hui-card-features$:
      hui-light-brightness-card-feature$:
        ha-control-slider$: |
          .slider {
             height: 20px !important; 
             --control-slider-color: lime !important; 
                    }

Thanks, this is working and the slider is not that height anymore but the height of the container ha-control-slider stays the same. If we could change --control-slider-thickness it scales itself.

has anyone ever changed the response time of the tooltip on the view icons?
during recent beta, I realized they were a bit slow, and rather unreliable out of the box, so I tried setting the tools known to me to make them flashier. To no avail though.

normally in button-card or so, I use transition: opacity 0.5s and checking the dom I tried to set that to the ha-svg-icon element in the paper-tab, or just plain to it.

nothing happening. When I checked more precisely, I noticed the tooltip is only happening when actually ā€˜touchingā€™ the center of the tab, and thats seems to be happening when doing this:

      paper-tab:hover {
        transition: opacity 0.5s;
        color: var(--primary-color);
        background: var(--hover-color);
      }

color and background work as designed (had those already), but again, adding the transition does nothingā€¦

maybe anyone else has tried to do that, please let me know

This works.

card-mod-card-yaml: |
     hui-card-features$:
      hui-light-brightness-card-feature$: |
        ha-control-slider {
             --control-slider-thickness: 5px !important;
                 }

Thanks man, it works.
Donā€™t know what I did wrong, tried so many times.

card-mod-card: |
vs
card-mod-card-yaml: |

Easy missā€¦

I have issues with white areas in my theme that I canā€™t seem to resolve. Instead of white, I would like to have a darker color so that the text is visible.

Does anyone have a solution for what I should add/change in the 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"
  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-black: "#000000"
  color-gold: '#C4AA87'
  color-dark-gray: '#A2A5AD'
  color-darker-gray: '#A2A5AD'
#  color-darker-gray: '#52555D'  
  color-really-dark-gray: '#52555D'
  color-darkest-gray: '#44474E'
  color-light-gray-nav: '#e3e3e1'
  color-light-gray-card: '#FAFAFA'
  mush-rgb-blue: 196, 170, 135  
  
  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: "rgba(0, 0, 0, 0.1) 0px 4px 12px"
  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: '#4200AA'
  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: "#4e4e4e"
  subtext1: "#b8c0e0"
  subtext0: "#a5adcb"

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

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

  base: "#FFFFFF"
  mantle: "#FFFFFF"
  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"

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

  # 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(--mauve)
  sidebar-selected-text-color: var(--mauve)

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

  # States and Badges
  state-icon-color: var(--lavender)
  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: rgba(10,10,10,0.2)
  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:

  card-on-background-color: rgba(255, 255, 255, 0.8)  
  card-off-background-color: rgb(0,0,0,0.2) 
  card-on-text-color: black      
  card-off-text-color: white
  light-card: "rgb(124, 111, 69)"

  # 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)
  
  # text
  primary-font-family: montserrat
  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)
  mdc-typography-body1-font-family: var(--primary-font-family)
  mdc-typography-font-family: var(--primary-font-family)    

  # 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)
  color-dark-blue: '#414E6E'
  color-gold: '#C4AA87'
  color-dark-gray: '#A2A5AD'
  color-darker-gray: '#52555D'
  color-darkest-gray: '#44474E'
  color-really-dark-gray: '#52555D'
  color-light-gray-nav: 'var(--color-darkest-gray)'
  color-light-gray-card: '#FAFAFA'
  mush-rgb-blue: 196, 170, 135

  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: "#cad3f5"
#  subtext1: "#b8c0e0"
#  subtext0: "#a5adcb"
  
  text: var(--color-white)
  titletext: var(--color-blue)
  subtext1: var(--text)
  subtext0: var(--text)  

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

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

  base: "#1b1d21"
  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"

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

  # Header
  app-header-background-color: '#1b1d21'
  app-header-text-color: var(--text)
  header-active-tab-color: "rgba(var(--mush-rgb-blue)"
  header-active-tab-bg-color: "rgba(var(--color-amber)"
  header-all-tabs-color: "#b2b3b8"  

  # 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(--color-gold)
  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(--mauve)
  sidebar-selected-text-color: var(--mauve)

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

  # States and Badges
  state-icon-color: var(--lavender)
  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: rgba(10,10,10,0.2)
#  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)


Iā€™m trying to hide the header, but itā€™s not applying for some reason. Have I formatted it right?

card-mod-theme: "Dark Auto"
# Header
card-mod-root: |
    app-header {
      display: none;
    }
card-mod-root-yaml: |
  paper-tabs$: |
    .not-visible {
      display: none;
    }
    /*Uncomment this if you want the header on the bottom
    #selectionBar {
      bottom: unset !important;
    }
    */
    
  mushroom-shape-icon$: |
    .shape {
      --shape-color: orange !important;
    }
  #view {
    margin-top: 0px !important;
    padding-bottom: var(--header-height);
    }
card-mod-card: |
  mushroom-shape-icon {
    --shape-color: none !important; 
    --shape-color-disabled: none;
  }
  
# Card-Mod Mushroom Popup Card
card-mod-more-info-yaml: |
  ha-more-info-info:
    $:
      state-card-display,state-card-button,state-card-input_button,state-card-input_number,state-card-media_player,state-card-input_select:
        $:
          .: |
              .state {
                  font-weight: bold;
                  }
          state-info:
            $: 
              state-badge:
                $:
                  ha-state-icon:
                  $: |
                      ha-icon {
                        display: block;
                      }
                      ha-icon, ha-svg-icon {
                        height: 22px !important;
                        position: relative;
                        top: -1px;
                          color: rgba(var(--mush-rgb-blue), 1) !important;
                      }
                      @media screen and (max-width: 800px) {
                          ha-icon, ha-svg-icon {
                            top: 2px !important;
                          }
                        }
              .: |
                  state-badge {
                      color: rgba(var(--mush-rgb-blue), 1) !important;
                      background: rgba(var(--mush-rgb-blue), .2);
                      margin: 0 15px 0 0;
                      background-size: contain;
                      border-radius: 100% !important;
                      --mdc-icon-size: 22px;
                    }
                    
                    .time-ago {
                        overflow: unset !important;
                        white-space: normal !important;
                        font-weight:400 !important;
                        font-size: 12px !important;
                        font-weight: bold !important;
                    }
              
                    .info, .state {
                      margin-left: 0px !important;
                      font-weight: bold;
                      padding: 8px 0;
                      position: relative;
                    }

What is wrong with my indentation ?

  - type: custom:mod-card
    card_mod:
      style:
        .swiper-container {
          width: 100% !important;
        }
    card:
      type: custom:swipe-card
      cards:
        - square: false
          columns: 2
          type: grid
          cards:

style: | was incorrect. You were missing the |

- type: custom:mod-card
  card_mod: 
      style: |
        .swiper-container {
          width: 100% !important;
        }
    card:
      type: custom:swipe-card
      cards:
        - square: false
          columns: 2
          type: grid
          cards:
1 Like

- type: custom:mod-card
    card_mod:
      style: |
        .swiper-container {
          width: 100% !important;
        }
    card:
      type: custom:swipe-card
      cards:
        - square: false
          columns: 2
          type: grid
          cards:
    ##########
    # Ruimte 1 #
    ##########
            - type: "custom:stack-in-card"
              cards:
                - type: custom:mushroom-template-card

gives me nothing :frowning: