yourname:
  dialog-backdrop-filter: blur(20px)
  iron-overlay-backdrop-opacity: 1
  iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)
  ### Header Height ###
  header-height: 40px
  ### Main Interface Colors ###
  lovelace-background: 'center / cover no-repeat url("/local/backgrounds/yourname.jpg") fixed'
  app-header-background-color: "#141A32"
  card-background-color: "rgba(0, 0, 0, 0.5)"
  primary-color: "#007AFF"
  light-primary-color: "#4DA3FF"
  primary-background-color: var(--app-header-background-color)
  secondary-background-color: "#000000"
  rgb-secondary-background-color: 0, 0, 0
  divider-color: "#3B4C8B"
  markdown-code-background-color: "#1E2747"
  ### Text ###
  primary-text-color: "#FFFFFF"
  secondary-text-color: var(--light-primary-color)
  text-primary-color: var(--primary-text-color)
  disabled-text-color: "#4F5F78"
  ### Sidebar Menu ###
  sidebar-icon-color: "#4F6B95"
  sidebar-text-color: "#CBD5E4"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: var(--light-primary-color)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  sidebar-background-color: var(--primary-background-color)
  ### States and Badges ###
  state-icon-color: var(--primary-color)
  state-icon-active-color: "#FBCD41"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: var(--primary-color)
  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(--light-primary-color)
  ### Labels ###
  label-badge-background-color: var(--markdown-code-background-color)
  label-badge-text-color: var(--primary-text-color)
  label-badge-red: var(--divider-color)
  label-badge-yellow: "#DCA304"
  ### Cards ###
  ha-card-border-radius: '20px'
  ha-card-background: "rgba(0, 0, 0, 0.5)"
  paper-card-header-color: var(--primary-text-color)
  paper-card-background-color: var(--ha-card-background)
  paper-listbox-background-color: var(--primary-background-color)
  rgb-card-background-color: var(--rgb-secondary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#FCFCFC"
  paper-toggle-button-checked-bar-color: var(--light-primary-color)
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: "#303F79"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--primary-background-color)
  data-table-background-color: var(--primary-background-color)
  ### Switches ###
  switch-unchecked-button-color: var(--divider-color)
  switch-unchecked-track-color: var(--divider-color)
  ### Inputs ###
  input-fill-color: "rgba(0, 0, 0, 0.5)"
  input-label-ink-color: var(--primary-color)
  input-ink-color: var(--primary-color)
  input-disabled-fill-color: "rgba(0, 0, 0, 0.33)"
  input-disabled-ink-color: var(--disabled-primary-color)
