Opinion on theme changes

[arunoruto]

It seems like home assistant has made some changes which made the catppuccin theme look a bit unpleasant. Therefore I tried to "fix" this weird behavior and used the latte as the light theme (fusing one dark theme and latte). Since I mainly use Macchiato, here is a sample config I created:

Catppuccin Latte/Macchiato:
  modes:
    light:
      text: "#4c4f69"
      subtext1: "#5c5f77"
      subtext0: "#6c6f85"
      overlay2: "#7c7f93"
      overlay1: "#8c8fa1"
      overlay0: "#9ca0b0"
      surface2: "#acb0be"
      surface1: "#bcc0cc"
      surface0: "#ccd0da"
      base: "#eff1f5"
      mantle: "#e6e9ef"
      crust: "#dce0e8"
      rosewater: "#dc8a78"
      flamingo: "#dd7878"
      pink: "#ea76cb"
      mauve: "#8839ef"
      red: "#d20f39"
      maroon: "#e64553"
      peach: "#fe640b"
      yellow: "#df8e1d"
      green: "#40a02b"
      teal: "#179299"
      sky: "#04a5e5"
      sapphire: "#209fb5"
      blue: "#1e66f5"
      lavender: "#7287fd"

      # Header
      app-header-background-color: var(--mantle)
      app-header-text-color: var(--text)
      app-header-selection-bar-color: var(--primary-color)
      app-header-edit-background-color: var(--crust)

      # Main Interface Colors
      primary-color: var(--blue)
      light-primary-color: var(--primary-color)
      primary-background-color: var(--mantle)
      secondary-background-color: var(--mantle)
      divider-color: var(--base)
      accent-color: var(--sky)

      # Text
      primary-text-color: var(--text)
      secondary-text-color: var(--subtext1)
      text-primary-color: var(--base)
      disabled-text-color: var(--surface0)

      # Sidebar Menu
      sidebar-icon-color: var(--subtext0)
      sidebar-text-color: var(--subtext0)
      sidebar-background-color: var(--crust)
      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)
      mdc-button-outline-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
      card-background-color: var(--base)
      ha-card-background: var(--card-background-color)
      ha-card-border-color: var(--crust)
      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: var(--overlay0)
      switch-unchecked-track-color: var(--surface0)

    dark:
      # Macchiato Colors
      text: "#cad3f5"
      subtext1: "#b8c0e0"
      subtext0: "#a5adcb"
      overlay2: "#939ab7"
      overlay1: "#8087a2"
      overlay0: "#6e738d"
      surface2: "#5b6078"
      surface1: "#494d64"
      surface0: "#363a4f"
      base: "#24273a"
      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: var(--mantle)
      app-header-text-color: var(--text)
      app-header-selection-bar-color: var(--primary-color)
      app-header-edit-background-color: var(--crust)

      # Main Interface Colors
      primary-color: var(--blue)
      light-primary-color: var(--primary-color)
      primary-background-color: var(--mantle)
      secondary-background-color: var(--mantle)
      divider-color: var(--base)
      accent-color: var(--sky)

      # Text
      primary-text-color: var(--text)
      secondary-text-color: var(--subtext1)
      text-primary-color: var(--base)
      disabled-text-color: var(--surface0)

      # Sidebar Menu
      sidebar-icon-color: var(--subtext0)
      sidebar-text-color: var(--subtext0)
      sidebar-background-color: var(--crust)
      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)
      mdc-button-outline-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
      card-background-color: var(--base)
      ha-card-background: var(--card-background-color)
      ha-card-border-color: var(--crust)
      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: var(--overlay0)
      switch-unchecked-track-color: var(--surface0)

I used some ChatGPT magic and the Google Material Theme as the base for which fields must be configured. I am not sure how to generate a preview without exposing my dashboard. But if some of you like the changes/tweaks, I can make a pull request :)