If you haven’t done so already create a www folder and a themes.yaml in config.
In the configuration.yaml change the frontend to:
frontend:
themes: !include themes.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)
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)
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;
}