Skip to content

Home Assistant Lovelace Theme

If you haven’t done so already create a www folder and a themes.yaml in config.

config folder at the root of hassio

In the configuration.yaml change the frontend to:

frontend:
  themes: !include themes.yaml
configuration.yaml

In the themes.yaml file we just add the following:

Dark - Purple:
  # Background image
  background-image: 'center / cover no-repeat url("/local/dark-blur-abstract-4k-v3.jpg") fixed'
  ### Main Interface Colors ###
  primary-color: "#754668"
  light-primary-color: "#baa4bb"
  primary-background-color: "#20252F"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#2F2F3D"
  ### Text ###
  primary-text-color: "#FFFFFF"
  secondary-text-color: "#baa4bb"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#5B5B77"
  ### Sidebar Menu ###
  sidebar-icon-color: "#7D8BA6"
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#baa4bb"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#754668"
  state-icon-active-color: "#FBCD41"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#754668"
  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: "#252B36"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: "#6C7B9B"
  ### Cards ###
  paper-card-background-color: "rgba(36, 36, 36, 0.5)"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#f7882f"
  paper-toggle-button-checked-bar-color: "#FFA3A3"
  paper-toggle-button-unchecked-button-color: "#6C7B9B"
  paper-toggle-button-unchecked-bar-color: "#434E62"
  switch-unchecked-color: gray
  switch-unchecked-button-color: gray
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

themes.yaml

download this wallpaper and place it in the www folder. Now in Hassio, in the top right, click on Configure UI, then Raw Editor, add the following at the top:


background: var(--background-image)
Raw Editor

Restart Home Assistant and it should be pretty.


BONUS: The Card Mod allows you to add css styles to any lovelace card. Install it manually or with HACS. https://github.com/thomasloven/lovelace-card-mod Once installed add the following code to a card.

style: |
  ha-card {
    border-radius: 15px;
    font-size: 12px;
    font-variant: small-caps;
    box-shadow: none;
  }