Home Assistant Guide

Simple tutorials for powerful automations

Customizing Themes in Home Assistant

Home Assistant allows you to dramatically change its look and feel using themes. Themes control the colors, backgrounds, and some styling of the Home Assistant user interface. This guide will walk you through installing, tweaking, and creating your own themes – all with clear explanations aimed at beginners.

What is a Theme in Home Assistant?

A theme is a collection of colors and styling settings that change the appearance of your dashboards and UI. You can choose from built-in themes, install new ones from the community, or even make your own for a personal touch.

How to Enable Themes

  • Go to your Profile: Click your user icon (bottom left) to open your Home Assistant user profile.
  • Find the Theme Option: In the "Theme" section, you can pick from available themes. By default, you'll only see "default" and possibly "dark mode."
  • Try switching to Dark Mode or another theme to see how it affects your Home Assistant interface.

If you don't see a Theme option, make sure Advanced Mode is enabled in your user profile.

Installing Community Themes

The easiest way to get more themes is by installing the HACS (Home Assistant Community Store) integration. HACS unlocks hundreds of free, user-contributed themes.

  1. Install HACS (see our HACS Introduction article).
  2. In Home Assistant, go to HACS → Frontend → Explore & Download Repositories.
  3. Set the filter to "Theme" to view only themes.
  4. Pick a theme you like and click "Download" or "Install."

After installing a new theme via HACS, restart Home Assistant or refresh your browser tab, then go back to your user profile to select it.

Using the themes.yaml File

Themes can also be loaded from a themes.yaml file. This is a simple YAML file where you define your own color schemes or add themes you've downloaded.

  1. Find your Home Assistant configuration folder (usually /config).
  2. Create a themes.yaml file if it doesn't exist.
  3. Add themes to the file (see the example below).
  4. Tell Home Assistant to use it by adding this to your configuration.yaml: 
    frontend:
  themes: !include themes.yaml
  5. Restart Home Assistant.

Sample theme in themes.yaml: 

My Custom Theme:
  primary-color: "#1a73e8"
  accent-color: "#41bdf5"
  background-color: "#f9f9f9"
  card-background-color: "#fff"
  text-color: "#222"
  # Add more variables as you like

Now select your new theme from your user profile!

Tweaking and Creating Your Own Theme

  • Start with an existing theme: Download a theme you like and tweak the color codes in themes.yaml.
  • Variables: Each setting (like primary-color or card-background-color) is called a "variable." You can change these to adjust different UI elements.
  • Preview and test: After saving changes, reload your browser tab and select your theme again to see updates.
Common Theme Variables (click to expand)
  • primary-color: Main UI color
  • accent-color: Highlight color for buttons/links
  • background-color: Page background
  • card-background-color: Background of cards/panels
  • text-color: Main text color
  • disabled-color: Color for disabled buttons/fields
  • See the Home Assistant Theme Docs for a full list.

Tips & Troubleshooting

  • Theme won't appear? Make sure your themes.yaml is referenced correctly in configuration.yaml and you've restarted Home Assistant.
  • Changes not showing up? Try clearing your browser cache or doing a hard refresh (Ctrl+F5 or Cmd+Shift+R).
  • Want to go back to default? Just select "default" from your user profile.
  • Need inspiration? Browse HACS Themes for hundreds of ideas.