Another Top 10 Home Assistant Lovelace Themes

Recently we featured a list of Top 10 Home Assistant Lovelace Themes to personalize your user experience. This is an extension of that list, featuring another 10 great Lovelace themes. If you would like to read a simple tutorial in designing your own Home Assistant dashboard using Mushroom Cards click here: Part 1, Part 2.

If you haven’t already, enable Home Assistant themes by adding the following line to your configuration.yaml

#Add to configuration.yaml and reboot HA
  themes: !include_dir_merge_named themes
Code language: YAML (yaml)

Note: Please keep in mind some of these themes utilize card-mod as a resource to fully style the theme. You need to install it in order to experience everything the theme has to offer. 
Bonus: At the end, we are going to show you how you could dynamically change themes right from your dashboard!

10. Vintage Theme

A vintage, typewriter & parchment looking theme.

9. UX Goodie Theme

Inspired by iOS Dark Mode by basnijholt

You can add a custom background by uploading any image (background.jpg) into your /config/www/ directory. Alternatively, if you don’t want to use any background just comment the 5th line of ux_goodie.yaml

lovelace-background: 'center / cover no-repeat url("/local/background.jpg") fixed'
Code language: YAML (yaml)

8. Sundown Theme

A nice, sunset theme with a smooth background.

To apply the stock background, add the following line to your lovelace-ui.yaml file:

background: var(--background-image)
Code language: YAML (yaml)

7. Noctis Solarized Theme

A well known theme Noctis, has been solarized for a new look. Based on Solarized Dark by Ethan Schoonover

If you want to use the custom fonts with the theme:

  • Make sure “Advanced Mode” is enabled in your user settings
  • Go to “Settings” -> “Lovelace Dashboards” -> “Resources”
  • Add a new resource with type “Stylesheet” and this URL:

If you want the blur effect on your popup cards you need to have card-mod installed and uncomment the following lines in noctis-solarized.yaml

card-mod-theme: noctis-solarized

  card-mod-more-info-yaml: |
    $: |
      .mdc-dialog .mdc-dialog__scrim {
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        background: rgba(0,0,0,.6);
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        box-shadow: none !important;
        border-radius: var(--ha-card-border-radius);
    .: |
      :host {
        --ha-card-box-shadow: none;
Code language: YAML (yaml)

6. Reeder Dark Theme

A Reeder App inspired theme for Home Assistant. Black/gray matte look all across.

5. Whatsapp Theme

WhatsApp inspired theme for Home Assistant

4. MacOS Theme

Beautiful MacOS inspired theme, available in light and dark mode.

3. Kibibit Theme

A milky glass theme for Home Assistant.

This theme requires you to add the Comfortaa font as a resource to your lovelace configuration:

  - url:
    type: css
Code language: YAML (yaml)

2. Github Light & Dark Theme

A familiar look and feel, Github based themes available in light and dark variants.

1. Metrology

Metrology is a practical series of app customizations and redesigns aimed at bringing a bold, clear, and consistent user experience to various Windows and Android apps. Its design language is based on Metro and Fluent design systems pioneered by Microsoft Design since the 2010s.

This theme is capable of so much more than what is available as a first look. Visit the official repo for some more screenshots, and feature explanation.

Dynamically Change Themes

To dynamically change themes from your Lovelace dashboard, we need to create an input_select and an automation and link them together. The built-in service call frontend.set_theme is reported as not working for many users. The theme is cached with user login, so calling the service requires a re-login in many cases to apply the theme even after selecting backend-selected in the profile page.

To get around this bug, we will use browser_mod, because it has its own service call which changes the theme dynamically without issues. Install browser_mod from HACS and add it as a resource, see HERE.

Than we can create our input_select and automation:

#Input_select theme changer
    name: Themes
    icon: mdi:format-paint
      - "whatsapp-theme"
      - "vintage"
      - "sundown"
      - "Reeder Dark"
      - "noctis-solarized"
      - "macOS Theme"
      - "kibibit"
Code language: YAML (yaml)

Make sure you add the correct theme names, which you can copy from the theme selector on the profile page.

#Theme Switcher Automation
alias: Theme Switcher
initial_state: true
  - platform: state
    entity_id: input_select.themes
  - service: browser_mod.set_theme
      theme: |
        {{ states('input_select.themes') }}
Code language: YAML (yaml)

Now you can add the input_select entity anywhere on your dashboard and switch themes with 2 clicks. is a participant in the Amazon Services LLC Associates Program & AliExpress Portals Affiliate Program.
We may earn a small commission on qualifying purchases from these websites, which incurs no additional cost to you.
SmartHomeScene © 2023 All rights reserved
Privacy Policy | Contact | Support
BuyMeACoffee SmartHomeScene

2 thoughts on “Another Top 10 Home Assistant Lovelace Themes”

Leave a Comment

Your email address will not be published. Required fields are marked *