How to create themes for HA?

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.