🔹 Card-mod - Super-charge your themes!

image969 · March 30, 2024, 4:28pm

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;
     }

stephanschleichstr13 · April 2, 2024, 4:38pm

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;
          }
        }

skynet01 · April 5, 2024, 7:31am

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;
    }

mkanet · April 9, 2024, 4:21pm

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;
    }

kroma · April 15, 2024, 2:08pm

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;
      }

Mariusthvdb · April 22, 2024, 7:36am

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

hazio · April 26, 2024, 3:28pm

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

John_P · May 2, 2024, 6:57am

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;
        }

LiQuid_cOOled · May 2, 2024, 9:39am

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; 
                    }

John_P · May 2, 2024, 12:13pm

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.

Mariusthvdb · May 2, 2024, 12:23pm

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

LiQuid_cOOled · May 2, 2024, 11:26pm

This works.

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

John_P · May 3, 2024, 6:22am

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

LiQuid_cOOled · May 3, 2024, 6:26am

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

Easy miss…

Stevengerrard08 · May 3, 2024, 9:56am

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)

hazio · May 8, 2024, 8:18pm

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;
                    }

Faecon · May 13, 2024, 3:16am

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:

LiQuid_cOOled · May 13, 2024, 3:24am

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:

Faecon · May 13, 2024, 2:41pm


- 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

Ildar_Gabdullin · May 13, 2024, 2:55pm

May be the style is incorrect, i.e. not the mentioned “indentation” or “pipe” problem. Is it your code? The code must be written based on actual DOM paths.
This is not related to card-mod-themes, suggest to ask in the main card-mod thread.