Home Assistant Lovelace Theme

If you having 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 created add the following:


Dark – Light 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(125, 139, 166, 0.2)”
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”
### 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.