Hi,
I would like to create a theme for Home Assistant. Is there any tutorial\guide\documentation how to create themes, what to write in yaml file and how it works in general?
E.g. I want to change a font size, title padding only for markdown card. Although not all elements has css class, and I don’t know how to apply style to an element via HA theme.
There’s a bit in the docs here:
Themes are yaml files stored in the config folder in HA. Here’s a short annotated example, but there are a lot more possibilities:
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"
# 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
# card-background-color: rgba(0,0,0,0) # transparent
secondary-background-color: "#585858" # Behind current item in a dropdown list
# Sidebar
sidebar-background-color: "#1c1c1c"
# Header
app-header-background-color: "#1c1c1c"
If you’re just interested in particular cards you’d probably be better off with something like card mod:
Thanks, card-mod pretty much suite for me.