Themes for Home Assistant Lovelace slightly modified from JuanMTech

themes.yaml

# Thanks @JuanMTech! I've slightly modified their themes a little.
Google Light Theme:
  # Header:
  app-header-background-color: "#f3f5f7"
  app-header-text-color: "#000"
  # Main Interface Colors
  primary-color: "#5F9BEA"
  light-primary-color: var(--primary-color)
  primary-background-color: "#f3f5f7"
  secondary-background-color: var(--primary-background-color)
  divider-color: var(--primary-background-color)
  # Text
  primary-text-color: "#4A4A4A"
  secondary-text-color: "#5F6267"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#717171"
  # Sidebar Menu
  sidebar-icon-color: "#555"
  sidebar-text-color: "#555"
  sidebar-background-color: "#f3f5f7"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#5F9BEA"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color))
  # States and Badges
  state-icon-color: "#5F6267"
  state-icon-active-color: "#5F9BEA"
  state-icon-unavailable-color: var(--disabled-text-color)
  # Sliders
  paper-slider-knob-color: "#5F9Bd3"
  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: "#F8FAF9"
  label-badge-text-color: "#4D5575"
  label-badge-red: "#C7484C"
  label-badge-green: "#6DC071"
  label-badge-blue: "#51AAD1"
  label-badge-yellow: "#D9B757"
  label-badge-gray: "#5F6267"
  # Cards
  ha-card-border-radius: '18px'
  ha-card-box-shadow: 1px 1px 5px 0px rgb(220, 220, 220)
  paper-card-background-color: "rgba(255, 255, 255, 0.9)"
  paper-listbox-background-color: "rgba(255, 255, 255, 0.9)"
  # Switches
  switch-checked-button-color: "#5F9Bd3"
  switch-checked-track-color: "#75a2d3"
  switch-unchecked-button-color: "#5F6267"
  switch-unchecked-track-color: "#888b91"
  # 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)
  # Dropdowns
  material-background-color: var(--paper-card-background-color)
  material-secondary-background-color: var(--primary-background-color)
  mdc-theme-surface: var(--paper-card-background-color)
Dark - Purple:
  ### Main Interface Colors ###
  primary-color: "#4C3FF9"
  light-primary-color: "#6F64FA"
  primary-background-color: "#262938"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#313549"
  card-background-color: var(--paper-card-background-color)
  ### Text ###
  primary-text-color: "#F7F8FA"
  secondary-text-color: "#00ECCA"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#616387"
  ### Sidebar Menu ###
  sidebar-icon-color: "#4C3FF9"
  sidebar-text-color: "#F7F8FA"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: var(--secondary-text-color)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  sidebar-background-color: var(--paper-listbox-background-color)
  ### States and Badges ###
  state-icon-color: "#00ECCA"
  state-icon-active-color: "#F7AA1C"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#00ECCA"
  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: "#2E2F40"
  label-badge-text-color: "#F7F8FA"
  label-badge-red: "#323346"
  ### Cards ###
  ha-card-border-radius: "17px"
  ha-card-box-shadow: 1px 1px 5px 0px rgb(12, 13, 20)
  paper-card-background-color: "#2E2F40"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#4C3FF9"
  paper-toggle-button-checked-bar-color: "#262938"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: "#262938"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)