Skip to content
Home Assistant

Home Assistant Themes: The Ultimate 2026 Guide to a Stunning UI & Auto Dark Mode

24/03/2026

Last updated on March 24, 2026

Customizing your Home Assistant interface is the key to a comfortable and efficient user experience. In this definitive 2026 guide, I’ll walk you through installing and managing Home Assistant themes, from the initial setup to creating advanced automations that switch between a light and a Home Assistant dark mode automatically.

Step 1: Enabling the Themes Frontend in Home Assistant

Out of the box, Home Assistant doesn’t have theme management enabled. Our first step is to tell it where to look for our theme configuration files. To do this, you’ll need access to your system’s config files, typically through Add-ons (now officially called ‘Apps’ in the UI) like File Editor or Samba.

  1. Inside your main /config folder, create a new folder named themes. This is where we’ll store all our theme files.
  2. Open your main configuration file, configuration.yaml.
  3. Look for the frontend: section. If it doesn’t exist, create it. Add the following line to tell Home Assistant to load themes from the folder we just created:
frontend:
  themes: !include_dir_merge_named themes

Save your configuration.yaml file and restart Home Assistant for the changes to take effect. From now on, you’ll be able to select themes from your User Profile.

Step 2: How to Install Home Assistant Themes in 2026

There are two primary methods for adding new themes to your setup. My personal recommendation? Use HACS. It streamlines the entire process and makes life infinitely easier.

Method 1: Via HACS (Highly Recommended)

HACS (Home Assistant Community Store) is hands-down the easiest way to browse and install hundreds of community-created themes. If you don’t have it yet, I strongly suggest installing it before proceeding. It’s a game-changer for all Home Assistant customizations.

Once you have HACS installed:

  1. Navigate to HACS in your Home Assistant sidebar.
  2. Select the Frontend section.
  3. Click the blue “Explore & Download Repositories” button in the bottom right corner.
  4. Search for a theme you like, select it, and follow the installation instructions. HACS will automatically place the necessary files in your themes folder.

Method 2: Manual Installation

If you’d rather not use HACS or you’ve found a theme on a forum or GitHub, you can install it manually:

  1. Copy the theme’s YAML code.
  2. Navigate to your /config/themes/ folder.
  3. Create a new file with a .yaml extension, for example, my_cool_theme.yaml.
  4. Paste the code into this file and save it.

After adding a theme using either method, go to your user profile (by clicking your name at the bottom of the sidebar), and you’ll be able to select it from the “Theme” dropdown menu.

Step 3: Theme Automation for a Dynamic Experience

Switching themes manually is fine, but the real power of Home Assistant lies in automation. Let’s explore two ways to manage theme changes intelligently: with a selector on your dashboard and automatically based on the time of day.

Option A: Create a Theme Selector on Your Dashboard

To create a dropdown menu on your UI, we first need an `input_select` Helper.

  1. Go to Settings > Devices & Services > Helpers.
  2. Click “Create Helper” and choose “Dropdown”.
  3. Give it a name, like “Theme Selector”.
  4. In the options field, add the exact names of the themes you’ve installed. Important: This name must match the name defined *inside* the theme’s .yaml file, not the filename. For example, if a theme is named `Github Dark Theme`, that’s the option you must add.
  5. Save the helper. This will create an entity like `input_select.theme_selector`.

Now, create an automation that detects when the value of this `input_select` changes and applies the corresponding theme:

- alias: 'Dashboard Theme Selector' 
  id: 'dashboard_theme_selector_2026'
  trigger:
    # Triggers when we change the dropdown value
    - platform: state
      entity_id: input_select.theme_selector
    # Triggers on Home Assistant start to apply the last saved theme
    - platform: homeassistant
      event: start
  action:
    # Call the service to change the theme
    - service: frontend.set_theme
      data:
        # Use the dropdown's state as the name of the theme to apply
        name: "{{ states('input_select.theme_selector') }}"
  mode: single

Add this automation and don’t forget to add the `input_select.theme_selector` entity to an Entities card on your dashboard so you can control it.

Option B: Automatic Dark Mode (Day/Night)

One of the most popular automations is switching to a light theme during the day and a dark theme at night. We’ll use the `input_select` helper we just created to keep the UI in sync.

Here are the two automations you need. The first triggers at sunset, and the second at sunrise.

Automation to enable dark theme at sunset:

- alias: 'Automatic Theme - Night'
  id: 'automatic_theme_night_2026'
  trigger:
    - platform: sun
      event: sunset
  action:
    - service: input_select.select_option
      target:
        entity_id: input_select.theme_selector
      data:
        option: 'Github Dark Theme' # <-- Change this to your dark theme's name
  mode: single

Automation to enable light theme at sunrise:

- alias: 'Automatic Theme - Day'
  id: 'automatic_theme_day_2026'
  trigger:
    - platform: sun
      event: sunrise
  action:
    - service: input_select.select_option
      target:
        entity_id: input_select.theme_selector
      data:
        option: 'Github Light Theme' # <-- Change this to your light theme's name
  mode: single

With these three automations combined, you have a robust theme automation system: you can change it manually whenever you want from the dashboard, and if you leave it alone, it will adjust automatically with the sun.

Common Issues & Troubleshooting

If you run into trouble, here are a few fixes for the most common snags:

  • The theme isn't showing up in my profile: Make sure you restarted Home Assistant after modifying configuration.yaml. Double-check that the folder is named exactly themes and is located directly inside your /config directory.
  • A custom card's colors won't change: Some custom cards don't respect all theme variables. For deeper customization, I highly recommend exploring the Card Mod integration from HACS, which lets you apply CSS styles directly to any card.
  • I'm getting a YAML syntax error: Don't panic! The most common error in theme or configuration files is improper indentation. Use the "Check Configuration" tool under Settings > System > Repairs (and then the three-dot menu) to validate your files before restarting.