A theme is a yaml file which defines the colours to be used in dashboards. You can select a global theme in your profile:
Or you can do it on a dashboard basis in the Edit UI View Configuration dialogue:
Button cards allow you to select a theme for a specific card:
To define a theme, you need to create a yaml file listing all the CSS variables you want to change. This example includes some of the most commonly used ones:
darktest:
# TEXT COLOURS ######################################
# Primary/secondary text colour usage in cards varies.
# Entity card: primary for entity values, secondary for entity names
# Most other cards: primary for titles, entity names and values
# History graph: primary for titles and entity names, secondary for axis values
# Integration cards: eg Weather - bespoke design - usually primary for main headings and values, secondary for sub headings
primary-text-color: "#e1e1e1"
secondary-text-color: "#6c8b9b"
# Text colour on HA buttons
text-primary-color: "#e1e1e1" # eg in developer tools
text-light-primary-color: "#1c1c1c" # eg on user profile button at the bottom of the sidebar
disabled-text-color: "#bdbdbd"
# To make buttons transparent
# card-background-color: rgba(0,0,0,0)
# ha-card-border-color: rgba(0,0,0,0)
# ha-card-border-radius: "0px"
# ha-card-border-width: "0px"
# Header text
app-header-text-color: "#e1e1e1"
# Badges
label-badge-text-color: "#e1e1e1"
# Sidebar
sidebar-text-color: "#e1e1e1" # If omitted defaults to primary text colour
sidebar-selected-text-color: "#6c8b9b" # If omitted defaults to secondary text colour
# BACKGROUND COLOURS ###############################
# Main display area
primary-background-color: "#000000" # black
card-background-color: "#000000" # black
secondary-background-color: "#585858" # Behind current item in a dropdown list
# Sidebar
sidebar-background-color: "#1c1c1c"
# Header
app-header-background-color: "#1c1c1c"
There’s a list of variables here:
If you have the default configuration themes will be stored in a config folder called themes.