Show off your favourite dashboard creations!

[Mariusthvdb (Marius)]

thanks. thats already very simple indeed, no where near the original that I had some years ago

will give it a run then.

btw this is as fars as I could go back in my backups

Original Matrix theme

matrix:
  name: ‘Matrix’
  # MyVariables
  base-hue: '120' #Controls the base (and accent) color hue (0-360) | 0=Red 60=Yellow 120=Green 180=Cyan 240=Blue 300=Magenta 360=Red
  base-sat: '16%' #Controls the saturation of the theme (0%-100%) | 0%=Grey 100%=Full Saturation
  # MyVar
  huesat: 'var(--base-hue), var(--base-sat),’
  # Primary Color
  primary-color: 'hsl(var(--huesat) 20%)’
  # Backgrounds
  primary-background-color: 'var(--primary-color)’
  secondary-background-color: 'hsl(var(--huesat) 16%)’
  paper-listbox-background-color: 'var(--primary-color)’
  paper-card-background-color: 'hsl(var(--huesat) 12%)’
  paper-dialog-background-color: 'var(--paper-card-background-color)’
  table-row-background-color: 'hsl(var(--huesat) 12%)’
  table-row-alternative-background-color: 'hsl(var(--huesat) 10%)’
  # Devider
  divider-color: 'hsla(0, 0%, 0%, 0)’
  dark-divider-opacity: ‘0’
  light-divider-opacity: ‘0’
  # Text colors
  primary-text-color: 'hsl(var(--huesat) 60%)’
  text-primary-color: 'hsl(var(--huesat) 60%)’
  secondary-text-color: 'hsl(var(--huesat) 60%)’
  disabled-text-color: 'hsl(var(--huesat) 70%)’
  sidebar-text_-_color: 'hsl(var(--huesat) 90%)’
  sidebar-text-color: 'hsl(var(--huesat) 90%)’
  paper-card-header-color: 'hsl(var(--base-hue), 90%, 50%)’
  # Text Adjustments
  paper-font-headline_-_letter-spacing: ‘-0.5px’
  paper-font-headline_-_font-weight: ‘500’
  paper-font-body1_-_font-weight: ‘500’
  # Nav Menu
  paper-listbox-color: 'hsl(var(--huesat) 50%)’
  paper-grey-50: 'hsl(var(--huesat) 50%)’
  paper-grey-200: 'hsla(var(--huesat) 26%)’
  # Paper card
  paper-item-icon-color: 'hsl(var(--huesat) 30%)’
  paper-item-icon-active-color: 'var(--paper-item-icon-color)’
  paper-item-icon_-_color: 'var(--paper-item-icon-color)’
  paper-item-selected_-_background-color: 'hsla(0, 0%, 0%, 0.2)’
  paper-tabs-selection-bar-color: 'hsla(0, 0%, 0%, 0.2)’
  # Labels
  label-badge-red: 'hsla(0, 0%, 0%, 0)’
  label-badge-border-color: 'var(--label-badge-red)’
  label-badge-background-color: 'var(--paper-card-background-color)’
  label-badge-text-color: 'var(--primary-text-color)’
  # Shadows
  shadow-elevation-2dp_-_box-shadow: 'inset 0px 0px 0px 4px hsl(var(--huesat) 18%)’
  shadow-elevation-16dp_-_box-shadow: 'inset 0px 0px 0px 4px hsl(var(--huesat) 28%)’
  # Switches
  paper-toggle-button-checked-button-color: 'hsl(var(--base-hue), 90%, 50%)’
  paper-toggle-button-checked-bar-color: 'hsl(var(--huesat) 25%)’
  paper-toggle-button-unchecked-button-color: 'hsl(var(--huesat) 25%)’
  paper-toggle-button-unchecked-bar-color: 'hsl(var(--huesat) 5%)’
  # Sliders
  paper-slider-knob-color:      'hsl(var(--base-hue), 90%, 50%)’
  paper-slider-knob-start-color: 'hsl(var(--base-hue), 80%, 25%)’
  paper-slider-pin-color:      'hsl(var(--base-hue), 90%, 50%)’
  paper-slider-active-color:      'hsl(var(--base-hue), 90%, 50%)’
  paper-slider-container-color: 'hsl(var(--huesat) 28%)’
  paper-slider-secondary-color: 'hsl(var(--huesat) 90%)’
  paper-slider-disabled-active-color: 'hsl(var(--base-hue), 80%, 25%)’
  paper-slider-disabled-secondary-color: 'hsl(var(--base-hue), 80%, 25%)’
  paper-dialog-color: 'hsl(var(--base-hue), 20%, 80%)’

[hiddevanbrussel]

I stopped creating yaml code. I started a project on github where it is possible to interact with Home Assistant and create your own dashboard very easily

hiddevanbrussel/Dashboard-Home-Assistant

Dashboard Home Assistant

[dprischak (Daniel Prischak)]

This is what the Dashboard looks like for my garage. It monitors the House LED’s, XMas props, motion detection, garage refrigerator/freezer temps and humidity.

[Morrizzz (Morriz)]

Hi everyone,

Two years ago I had never even heard of Home Assistant, let alone YAML. With lots of help from YouTube, digging around on this forum, and more recently AI, I ended up with this setup. The dashboard is mainly controlled via a Galaxy Tab A8 mounted on the living room wall. And like any good Home Assistant project, the dashboard is never really finished — every month the code gets tweaked, improved, or another IoT device finds its way in

[shpongledsummer]

After years of playing around with it, my dashboard has stayed exactly the same for a while now. I guess I’ve finally reached dashboard peace.

Dark Mode	Light Mode

The top section is a custom weather card I made (you can find the project here). The bottom uses the awesome navbar card, and everything in between is built using paper-buttons-row cards.

[evert.philipp (Philipp)]

I love your dashboard. Can you share the Code for the dashboard?

[laurens362]

Looks great! Would love to see more though

[shpongledsummer]

Sure, here’s a few more

screenshots

[rmieden (Rick)]

Nice Dashboard! Which Theme do you use?

[nelsonamen]

[Piotras1]

Hello Everyone

I also wanted to show off the tablet and card panels of my production, all of them that you can see.

The following cards are used in the panels:

https://community.home-assistant.io/t/piotras-energy-donut
https://community.home-assistant.io/t/piotras-value-bar
https://community.home-assistant.io/t/piotras-climate-info
The ‘Piotras smart button’ will soon be available in its own repo; you can see it in action on the panels below (the one with images).

[ASNNetworks]

After years of frontend changes causing community addons to break, and my own custom addons needing fixes after almost every major Home Assistant release, I decided it was time to fully separate everything. I had even started postponing updates entirely because frontend changes kept breaking my setup. After going 12 months without updating Home Assistant, I finally decided to hit the big “update all” button, upgrade HA, every addon, and every plugin, and then start fresh with my own frontend.

Home Assistant is fantastic at what it does best: acting as a hub for devices, integrations, and automations. But for the dashboard itself, I’d rather rely on proper frontend tools that I have full control over. So I built my own frontend in Next.js using websockets and REST API, letting Home Assistant handle the backend while I create the UI I actually want and need.

It’s still very much a work in progress, and there’s plenty left to do. But I’m really enjoying it so far, and hopefully it might give others a few ideas or some inspiration too.

Short preview videos for inspiration

Preview new Home Assistant dashboard + Lyrion (mobile view)

[VietNgoc (Ngoc John)]

That looks really good… would you like to share the project with the community?

[maksym-ivchenko]

Hi. Could you tell me what card is used in the lower left corner under “Energy”? It looks like a power-flow-card-plus, but as far as I know, it doesn’t have square elements or a horizontal layout.

[laurens362]

got a yaml ?

[ASNNetworks]

This isn’t in YAML, like i mentioned this is a complete separate frontend, not built inside HA but as a dedicated frontend using Next.js. So it doesn’t run on HA itself, but connects to it using websockets and REST API.

[shpongledsummer]

It’s a custom theme I made by throwing different CSS variables I found via browser dev tools into a single file. It’s still missing many variables (since they change so damn often with HA updates), but I’m happy to share it for inspiration if you’d like

[rmieden (Rick)]

Yes please. That would be great. I can use some inspiration, as I’m struggling some time with a proper theme at the moment.

[shpongledsummer]

Sure! Just as a note, I use two separate files for light and dark modes instead of a combined one, and I switch between them using an automation. I just find it more flexible for my use cases. I’m sharing the dark version, since both at once don’t fit into the reply.

There are also a lot of custom colors in there. They are mainly used for my paper-buttons-row cards shown in the screenshots, along with various CSS variables for other custom cards.

Also, keep in mind there are probably some outdated variables in there too and many are missing because I have been too lazy to figure them out. I would not call it a “complete theme”, but it should give you a good start.

Mandalo Dark

Mandalo (Dark):

  # Mandalo custom
  card-background-light: 'rgba(255,255,255, 0.04)'
  card-background-active: '#979CA4'
  card-background-semi-transparent: 'rgba(0, 0, 0, 0.2)'
  card-background-inverted: '#202124'
  card-item-background: 'var(--background-color)'
  dashboard-background: '#161719'
  album-cover-gradient: 'rgba(0,0,0,0.4)'
  gradient-background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, #161719 100%)'
  accent-color-dashboard: 'var(--accent-color)'
  accent-color-dashboard-background: 'rgba(84, 124, 140, 0.2)'
  accent-medium-color: 'var(--accent-color)'
  accent-active-color: 'var(--accent-color)'
  accent-timer-bar: 'var(--accent-color)'
  accent-light-on: '#98867C'
  accent-light-on-background: 'rgba(152, 134, 124, 0.2)'
  thermometer-accent: 'rgba(239,104,55,0.5)'
  thermometer-background: 'rgba(239,104,55,0.2)'
  temperature-accent: 'rgba(123, 82, 41, 1)'
  temperature-background: 'rgba(255,195,113,0.4)'
  humidity-accent: '#397E96'
  humidity-background: 'rgba(57, 126, 150, 0.2)'
  card-item-shadow: '0 2px 4px 0 rgba(0, 0, 0, 0.9), 0 1px 2px 0 rgba(0, 0, 0, 0.8)'
  card-shadow-color: 'rgba(0, 0, 0, 0.65)'
  navbar-shadow: '0px -6px 25px rgba(0, 0, 0, 0.6)'
  popup-background: '#161719'
  backdrop-background-color: 'rgba(22, 23, 25, 0.6)'
  icon-color: '#9BA1A6'
  text-color-active: '#FFFFFF'
  text-color-semi-transparent: 'rgba(225, 227, 230, 0.6)'
  text-medium-light-color: 'var(--text-color)'
  text-medium-color: '#8A8F96'
  dark-primary-color: '#3F5D6B'
  darker-primary-color: '#2A404A'

  # Base
  background-color: '#161719'
  card-background: '#202124'

  # Accent
  accent-color: '#547C8C'
  primary-color: 'var(--accent-color)'

  # Shadows
  card-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.9), 0 2px 4px 0 rgba(0, 0, 0, 0.8)'
  card-border: none
  border-radius: '22px'
  border-radius-inner: '100px'

  # App shell
  app-header-background-color: '#161719'
  app-header-backdrop-filter: 'blur(12px)'
  app-footer-background-color: 'rgba(22, 23, 25, 0.2)'
  transparent-app-footer-background-color: 'rgba(22, 23, 25, 0.6)'
  primary-background-color: 'var(--background-color)'
  header-height: 60px
  secondary-background-color: 'var(--card-background-light)'
  markdown-code-background-color: 'var(--background-color)'

  # Swipe card
  simple-swipe-card-pagination-dot-active-color: 'var(--accent-color)'

  # Bubble
  bubble-light-color: 'var(--accent-light-on)'
  bubble-backdrop-background-color: 'rgba(22, 23, 25, 0.6)'
  bubble-pop-up-main-background-color: 'var(--popup-background)'
  bubble-border-radius: 'var(--border-radius)'
  bubble-select-background: 'var(--card-background)'
  bubble-select-list-background-color: 'var(--card-background)'
  bubble-select-main-background-color: 'var(--card-background)'
  bubble-media-player-main-background-color: 'var(--card-background)'
  bubble-select-list-width: '140px'
  bubble-icon-background-color: 'var(--card-item-background)'
  bubble-main-background-color: 'var(--card-background)'
  bubble-secondary-background-color: 'var(--card-item-background)'
  bubble-accent-color: 'var(--accent-color-dashboard)'
  bubble-sub-button-light-background-color: 'var(--accent-color-dashboard-background)'
  bubble-line-background-color: 'var(--text-color-semi-transparent)'

  # Fonts
  primary-font-family: "'Montserrat', sans-serif"
  ha-font-family-body: "var(--primary-font-family)"
  ha-font-family-heading: "var(--primary-font-family)"
  ha-font-family-code: "var(--primary-font-family)"
  ha-font-family-longform: "var(--primary-font-family)"
  mdc-typography-font-family: "var(--primary-font-family)"
  md-ref-typeface-plain: "var(--primary-font-family)"
  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)"
  ha-line-height-normal: '1.3'
  ha-line-height-condensed: '1.1'
  ha-line-height-expanded: '1.6'
  md-list-item-label-text-weight: '600'
  ha-font-weight-normal: '400'
  ha-font-weight-medium: '500'
  ha-font-weight-bold: '700'
  ha-font-smoothing: 'antialiased'

  # Weather card
  awc-text-day: 'var(--text-color)'
  awc-text-night: 'var(--text-color)'

  # Text
  text-color: '#E1E3E6'
  primary-text-color: 'var(--text-color)'
  text-primary-color: 'var(--text-color-active)'
  sidebar-text-color: 'var(--text-color)'
  secondary-text-color: 'var(--text-color-semi-transparent)'
  wa-color-text-normal: 'var(--text-color)'
  ha-color-text-secondary: 'var(--text-color)'
  disabled-text-color: '#61656B'
  mdc-dialog-content-ink-color: 'var(--text-color)'

  # Layout
  ha-view-sections-narrow-column-gap: 28px
  ha-view-sections-row-gap: 0px
  horizontal-stack-card-gap: 12px
  vertical-stack-card-margin: 0px
  vertical-stack-card-gap: 12px
  masonry-view-card-margin: 0px
  grid-card-gap: '12px'

  # Inputs
  mdc-text-field-fill-color: 'var(--background-color)'
  mdc-text-field-ink-color: 'var(--text-color)'
  mdc-select-fill-color: 'var(--card-item-background)'
  mdc-text-field-label-ink-color: 'var(--secondary-text-color)'
  input-fill-color: 'var(--card-background)'
  input-ink-color: 'var(--text-color)'
  input-label-ink-color: 'var(--text-color)'
  input-disabled-fill-color: 'var(--background-color)'
  input-disabled-ink-color: 'var(--disabled-text-color)'
  input-disabled-label-ink-color: 'var(--disabled-text-color)'
  input-idle-line-color: 'var(--background-color)'
  input-dropdown-icon-color: 'var(--secondary-text-color)'
  input-hover-line-color: 'var(--primary-color)'
  paper-input-container-focus-color: 'var(--accent-color)'

  # Material design
  mdc-theme-secondary: 'var(--accent-color)'
  mdc-theme-on-primary: 'var(--text-color-active)'
  mdc-theme-on-secondary: 'var(--text-color-active)'
  mdc-theme-primary: 'var(--primary-color)'
  mdc-button-outline-color: 'var(--text-color)'
  ha-ripple-hover-opacity: '0.1'
  ha-ripple-pressed-opacity: '0.2'
  ha-ripple-hover-color: 'var(--accent-color-dashboard-background)'
  ha-ripple-color: 'var(--card-item-background)'
  ha-ripple-pressed-color: 'var(--accent-color-dashboard-background)'

  # Cards
  card-background-color: 'var(--card-background)'
  ha-card-background: 'var(--card-background)'
  ha-card-box-shadow: 'var(--card-shadow)'
  ha-card-border-radius: 'var(--border-radius)'
  ha-card-border-style: 'none !important'
  ha-card-border-width: '0px'
  ha-card-border-color: 'none !important'
  border-color: 'none'
  border-style: 'none !important'
  outline-color: 'var(--card-background-light)'

  # Entity icons
  paper-item-icon-color: 'var(--text-color)'
  paper-item-icon-active-color: 'var(--accent-color)'
  state-icon-color: 'var(--text-color)'
  state-active-color: 'var(--accent-color)'

  # Sidebar
  sidebar-background-color: 'var(--card-item-background)'
  sidebar-icon-color: 'var(--text-color)'
  sidebar-selected-icon-color: 'var(--accent-color)'
  sidebar-selected-text-color: 'var(--text-color)'
  paper-listbox-background-color: 'var(--sidebar-background-color)'
  divider-color: 'var(--background-color)'
  light-primary-color: 'var(--ha-card-background)'

  # Sliders
  paper-slider-knob-color: 'var(--accent-color)'
  paper-slider-pin-color: 'var(--background-color)'
  paper-slider-active-color: 'var(--accent-color)'
  paper-slider-container-color: 'var(--background-color)'

  # Toggles
  paper-toggle-button-checked-bar-color: 'var(--accent-color)'
  switch-unchecked-color: 'var(--card-item-background)'
  switch-checked-button-color: 'var(--accent-color)'
  switch-unchecked-track-color: 'var(--background-color)'
  switch-checked-track-color: 'var(--background-color)'

  # Radio
  paper-radio-button-checked-color: 'var(--accent-color)'

  # Popups
  more-info-header-background: 'rgba(32, 33, 36, 0.9)'
  paper-dialog-background-color: 'rgba(32, 33, 36, 0.9)'

  # Tables
  table-row-background-color: 'var(--background-color)'
  table-row-alternative-background-color: 'var(--ha-card-background)'

  # Badges
  label-badge-background-color: 'var(--background-color)'
  label-badge-text-color: 'var(--text-primary-color)'
  label-badge-red: 'rgba(255,85,105,1)'
  label-badge-blue: 'rgba(42,180,255,1)'
  label-badge-green: 'rgba(0,230,154,1)'
  label-badge-yellow: 'rgba(219,165,48,1)'

  # Custom header
  ch-background: 'var(--background-color)'
  ch-active-tab-color: 'var(--accent-color)'
  ch-notification-dot-color: 'var(--accent-color)'
  ch-all-tabs-color: 'var(--sidebar-icon-color)'
  ch-tab-indicator-color: 'var(--accent-color)'

  # Header tabs
  ha-tab-active-text-color: 'var(--accent-color)'
  ha-tab-indicator-color: 'var(--accent-color)'
  app-header-selection-bar-color: 'var(--accent-color)'

  # Mini media player
  mini-media-player-base-color: 'var(--text-color)'
  mini-media-player-accent-color: 'var(--accent-color)'

  # Paper buttons
  pbs-button-color: 'var(--text-color)'
  pbs-button-rgb-color: 'var(--text-color)'
  pbs-button-rgb-state-color: 'var(--text-color)'
  pbs-button-rgb-default-color: 'var(--text-color)'
  pbs-button-rgb-fallback: 'var(--text-color)'
  rgb-state-default-color: 'var(--text-color)'

  # Editor
  code-editor-background-color: 'var(--background-color)'
  codemirror-property: 'var(--accent-color)'
  info-color: 'var(--accent-color)'
  ha-color-fill-primary-quiet-resting: 'var(--ha-card-background)'

  # MDC surface
  mdc-theme-background: 'var(--primary-background-color)'
  mdc-theme-surface: 'var(--card-background)'

  # Outline
  outline-hover-color: 'rgba(255,255,255,0.24)'

  # RGB
  rgb-primary-color: '84, 124, 140'
  rgb-accent-color: '84, 124, 140'
  rgb-primary-text-color: '225, 227, 230'
  rgb-secondary-text-color: '138, 143, 150'
  rgb-text-primary-color: '255,255,255'
  rgb-card-background-color: '32, 33, 36'
  rgb-warning-color: '255,166,0'
  rgb-error-color: '219,68,55'
  rgb-success-color: '67,160,71'
  rgb-info-color: '3,155,229'

  # Status
  scrollbar-thumb-color: 'rgb(100, 100, 100)'
  error-color: '#DB4437'
  warning-color: '#FFA600'
  success-color: '#43A047'
  clear-background-color: 'var(--background-color)'
  label-badge-grey: '#9E9E9E'
  disabled-color: 'var(--disabled-text-color)'

  # Palette
  red-color: '#F44336'
  pink-color: '#E91E63'
  purple-color: '#926BC7'
  deep-purple-color: '#6E41AB'
  indigo-color: '#3F51B5'
  blue-color: '#2196F3'
  light-blue-color: '#03A9F4'
  cyan-color: '#00BCD4'
  teal-color: '#009688'
  green-color: '#4CAF50'
  light-green-color: '#8BC34A'
  lime-color: '#CDDC39'
  yellow-color: '#FFEB3B'
  amber-color: '#FFC107'
  orange-color: '#FF9800'
  deep-orange-color: '#FF6F22'
  brown-color: '#795548'
  light-grey-color: '#BDBDBD'
  grey-color: '#9E9E9E'
  dark-grey-color: '#606060'
  blue-grey-color: '#607D8B'
  black-color: '#000000'
  white-color: '#FFFFFF'
  history-unavailable-color: 'transparent'

  # Input borders
  input-disabled-line-color: 'rgba(255,255,255,0.06)'
  input-outlined-idle-border-color: 'rgba(255,255,255,0.38)'
  input-outlined-hover-border-color: 'rgba(255,255,255,0.87)'
  input-outlined-disabled-border-color: 'rgba(255,255,255,0.06)'

  # State
  state-inactive-color: 'var(--grey-color)'
  state-unavailable-color: 'var(--disabled-text-color)'
  state-icon-error-color: 'var(--error-color)'
  history-unknown-color: 'var(--dark-grey-color)'
  switch-checked-color: 'var(--accent-color)'
  switch-unchecked-button-color: 'var(--switch-unchecked-color)'
  slider-color: 'var(--accent-color)'
  slider-secondary-color: 'var(--light-primary-color)'
  slider-track-color: 'var(--scrollbar-thumb-color)'

  # Data tables
  table-header-background-color: 'var(--card-background)'
  data-table-background-color: 'var(--card-background)'
  bar-box-shadow: 'var(--card-shadow)'

  # MDC extended
  mdc-theme-on-surface: 'var(--text-color)'
  mdc-theme-text-disabled-on-light: 'var(--disabled-text-color)'
  mdc-theme-text-primary-on-background: 'var(--primary-text-color)'
  mdc-theme-text-secondary-on-background: 'var(--secondary-text-color)'
  mdc-theme-text-hint-on-background: 'var(--secondary-text-color)'
  mdc-theme-text-icon-on-background: 'var(--secondary-text-color)'
  mdc-theme-error: 'var(--error-color)'

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

  # Controls
  mdc-checkbox-unchecked-color: 'rgba(var(--rgb-primary-text-color),0.54)'
  mdc-checkbox-disabled-color: 'var(--disabled-text-color)'
  mdc-radio-unchecked-color: 'rgba(var(--rgb-primary-text-color),0.54)'
  mdc-radio-disabled-color: 'var(--disabled-text-color)'
  mdc-tab-text-label-color-default: 'var(--primary-text-color)'
  mdc-button-disabled-ink-color: 'var(--disabled-text-color)'
  mdc-dialog-scroll-divider-color: 'var(--divider-color)'
  mdc-dialog-heading-ink-color: 'var(--primary-text-color)'
  mdc-top-app-bar-fixed-box-shadow: 'var(--bar-box-shadow)'

  # MDC text field / select
  mdc-text-field-idle-line-color: 'var(--input-idle-line-color)'
  mdc-text-field-hover-line-color: 'var(--input-hover-line-color)'
  mdc-text-field-disabled-line-color: 'var(--input-disabled-line-color)'
  mdc-text-field-outlined-idle-border-color: 'var(--input-outlined-idle-border-color)'
  mdc-text-field-outlined-hover-border-color: 'var(--input-outlined-hover-border-color)'
  mdc-text-field-outlined-disabled-border-color: 'var(--input-outlined-disabled-border-color)'
  mdc-text-field-disabled-fill-color: 'var(--input-disabled-fill-color)'
  mdc-text-field-disabled-ink-color: 'var(--input-disabled-ink-color)'
  mdc-select-idle-line-color: 'var(--input-idle-line-color)'
  mdc-select-hover-line-color: 'var(--input-hover-line-color)'
  mdc-select-outlined-idle-border-color: 'var(--input-outlined-idle-border-color)'
  mdc-select-outlined-hover-border-color: 'var(--input-outlined-hover-border-color)'
  mdc-select-outlined-disabled-border-color: 'var(--input-outlined-disabled-border-color)'
  mdc-select-disabled-fill-color: 'var(--input-disabled-fill-color)'
  mdc-select-ink-color: 'var(--input-ink-color)'
  mdc-select-label-ink-color: 'var(--input-label-ink-color)'
  mdc-select-disabled-ink-color: 'var(--input-disabled-ink-color)'
  mdc-select-dropdown-icon-color: 'var(--input-dropdown-icon-color)'
  mdc-select-disabled-dropdown-icon-color: 'var(--input-disabled-ink-color)'

  # Chips
  ha-assist-chip-filled-container-color: 'rgba(var(--rgb-primary-text-color),0.15)'
  ha-assist-chip-active-container-color: 'rgba(var(--rgb-primary-color),0.15)'
  chip-background-color: 'rgba(var(--rgb-primary-text-color),0.15)'

  # Vaadin
  material-body-text-color: 'var(--text-color)'
  material-background-color: 'var(--card-background)'
  material-secondary-background-color: 'var(--secondary-background-color)'
  material-secondary-text-color: 'var(--secondary-text-color)'

  # Buttons
  ha-button-primary-light-color: '#547C8C40'
  ha-button-warning-light-color: '#917B54C1'
  ha-button-neutral-color: '#D9DAE0'
  ha-button-neutral-light-color: '#6A7081'

  # State domains
  state-alarm_control_panel-armed_away-color: 'var(--green-color)'
  state-alarm_control_panel-armed_custom_bypass-color: 'var(--green-color)'
  state-alarm_control_panel-armed_home-color: 'var(--green-color)'
  state-alarm_control_panel-armed_night-color: 'var(--green-color)'
  state-alarm_control_panel-armed_vacation-color: 'var(--green-color)'
  state-alarm_control_panel-arming-color: 'var(--orange-color)'
  state-alarm_control_panel-disarming-color: 'var(--orange-color)'
  state-alarm_control_panel-pending-color: 'var(--orange-color)'
  state-alarm_control_panel-triggered-color: 'var(--red-color)'
  state-alert-off-color: 'var(--orange-color)'
  state-alert-on-color: 'var(--red-color)'
  state-binary_sensor-active-color: 'var(--amber-color)'
  state-binary_sensor-battery-on-color: 'var(--red-color)'
  state-binary_sensor-carbon_monoxide-on-color: 'var(--red-color)'
  state-binary_sensor-gas-on-color: 'var(--red-color)'
  state-binary_sensor-heat-on-color: 'var(--red-color)'
  state-binary_sensor-lock-on-color: 'var(--red-color)'
  state-binary_sensor-moisture-on-color: 'var(--red-color)'
  state-binary_sensor-problem-on-color: 'var(--red-color)'
  state-binary_sensor-safety-on-color: 'var(--red-color)'
  state-binary_sensor-smoke-on-color: 'var(--red-color)'
  state-binary_sensor-sound-on-color: 'var(--red-color)'
  state-binary_sensor-tamper-on-color: 'var(--red-color)'
  state-climate-auto-color: 'var(--green-color)'
  state-climate-cool-color: 'var(--blue-color)'
  state-climate-dry-color: 'var(--orange-color)'
  state-climate-fan_only-color: 'var(--cyan-color)'
  state-climate-heat-color: 'var(--deep-orange-color)'
  state-climate-heat-cool-color: 'var(--amber-color)'
  state-cover-active-color: 'var(--purple-color)'
  state-device_tracker-active-color: 'var(--blue-color)'
  state-device_tracker-home-color: 'var(--green-color)'
  state-fan-active-color: 'var(--cyan-color)'
  state-humidifier-on-color: 'var(--blue-color)'
  state-lawn_mower-error-color: 'var(--red-color)'
  state-lawn_mower-mowing-color: 'var(--teal-color)'
  state-light-active-color: 'var(--amber-color)'
  state-lock-jammed-color: 'var(--red-color)'
  state-lock-locked-color: 'var(--green-color)'
  state-lock-locking-color: 'var(--orange-color)'
  state-lock-unlocked-color: 'var(--red-color)'
  state-lock-unlocking-color: 'var(--orange-color)'
  state-lock-open-color: 'var(--red-color)'
  state-lock-opening-color: 'var(--orange-color)'
  state-media_player-active-color: 'var(--light-blue-color)'
  state-person-active-color: 'var(--blue-color)'
  state-person-home-color: 'var(--green-color)'
  state-plant-active-color: 'var(--red-color)'
  state-siren-active-color: 'var(--red-color)'
  state-sun-above_horizon-color: 'var(--amber-color)'
  state-sun-below_horizon-color: 'var(--indigo-color)'
  state-switch-active-color: 'var(--amber-color)'
  state-update-active-color: 'var(--orange-color)'
  state-vacuum-active-color: 'var(--teal-color)'
  state-valve-active-color: 'var(--blue-color)'
  state-sensor-battery-high-color: 'var(--green-color)'
  state-sensor-battery-low-color: 'var(--red-color)'
  state-sensor-battery-medium-color: 'var(--orange-color)'
  state-water_heater-eco-color: 'var(--green-color)'
  state-water_heater-electric-color: 'var(--orange-color)'
  state-water_heater-gas-color: 'var(--orange-color)'
  state-water_heater-heat_pump-color: 'var(--orange-color)'
  state-water_heater-high_demand-color: 'var(--deep-orange-color)'
  state-water_heater-performance-color: 'var(--deep-orange-color)'
  state-icon-unavailable-color: 'var(--disabled-text-color)'
  error-state-color: 'var(--error-color)'

  # Card-mod
  card-mod-theme: "Mandalo (Dark)"

  # Dialogs
  dialog-backdrop-filter: blur(18px)
  iron-overlay-backdrop-opacity: 1
  iron-overlay-backdrop-background-color: rgba(0,0,0,0.45)
  dialog-border-radius: 20px
  dialog-box-shadow: '0 10px 36px #00000088'

  # Card-mod more-info
  card-mod-more-info-yaml: |
    $: |
        .mdc-dialog__scrim {
            background: rgba(255,255,255,0) !important;
        }

        .mdc-dialog .mdc-dialog__content {
            background: rgba(255,255,255,0.0) !important;
        }

        .mdc-dialog__container .mdc-dialog__surface {
            box-shadow: none !important;
            backdrop-filter: blur(18px) !important;
            border-radius: 0px !important;
        }

    ha-dialog-header: |
        .header-bar {
            box-shadow: var(--card-shadow) !important;
        }

        .breadcrumb { display: none !important; }

        h2 { font-size: 2.2rem !important; font-weight: 600 !important; }

    ha-more-info-state-header: |
        .last-changed { display: none !important; }

    ha-attributes { display: none !important; }

[rmieden (Rick)]

Thanks! This is really helpful. Saves me a lot of time and is for me a very good basis to work with. Much appreciated!