Be Smart, Go Local.

Top 10 Home Assistant Lovelace Themes

Ranking The Top 10 Most Beautiful Home Assistant Themes for your Lovelace UI dashboard.

Even though the ideal scenario for a fully automated smart home would be to never touch your UI, Home Assistant tinkerers create all kinds of custom dashboard designs. Different devices require different card layouts and theming, such as mobile devices, computers or wall-mounted tablets. Recently, we made a tutorial of how you can create a clean, minimalistic Lovelace UI using Mushroom Cards

This article features a list of 10 of the most beautiful HACS available themes you could use to personalize your different Lovelace UIs. Similar theme and card collections:

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!

If you have not enabled custom themes already, add this to your configuration.yaml file and reboot Home Assistant:

frontend:
  themes: !include_dir_merge_named themes

10. Dark Teal Theme

A simple dark mode, clear Teal color based design based on Clear Dark Theme.

9. CyberPunk 2077 Theme

Futuristic theme, based on the Cyberpunk 2077 game by CD Project Red.

Optionally you can add the Rajdhani font as a stylesheet resource to have yet a closer Cyberpunk experience:

https://fonts.googleapis.com/css2?family=Rajdhani:wght@500&display=swap

8. Windows 10 Themes

Windows 10 based look, which includes 49 different colors taken from Windows 10 accent color picker and UI elements

7. Caule Theme Pack

A theme collection originally made for the Home Assistant community in Brazil, featuring 10 modern colors and 4 style categories.

6. Amoled Blue Theme

A true black Home Assistant theme for devices with AMOLED displays accented with blue color.

5. Google Theme

A light/dark theme based on Google’s Material design for Android.

4. Noctis

Beautiful dark blue theme with blue accents, commonly used in mounted dashboards.

3. Synthwave Hass

Do you remember that endless summer back in ’84? Cruising down the ocean-highway with the top down, the wind in our hair and heads buzzing with neon dreams?

No, I don’t remember it either, but with this experimental theme we can go there.

2. Waves

The Waves theme features a modified blend look based on Noctis and Caule Pack theme. It features light and dark modes with a smooth overlay design.

1. iOS Themes

HomeKit based theme collection, featuring 7 different backgrounds with 28 different looks and accents.

To utilize the backgrounds that come with the themes, add this to your lovelace-ui.yaml:

background: var(--background-image)

Dynamically Change Themes

To change themes using 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
input_select:    
  themes:
    name: Themes
    icon: mdi:format-paint
    options:
      - "noctis"
      - "AMOLED Blue"
      - "Mushroom"
      - "Windows 10 Storm"
      - "Caule Black Rose"
      - "Caule Black Purple"
      - "cyberpunk-2077"
      - "dark_teal"

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
trigger:
  - platform: state
    entity_id: input_select.themes
action:
  - service: browser_mod.set_theme
    data:
      theme: |
        {{ states('input_select.themes') }}

You can add the input_select entity to your dashboard and switch themes dynamically.

#Theme Switcher entities card
type: entities
entities:
  - entity: input_select.themes
    name: Current Theme
title: Theme Switcher

Screenshots

17 thoughts on “Top 10 Home Assistant Lovelace Themes”

  1. Hello, I have installed iOS theme but i do not get background image. the colour of the top bar is changed but the background of the cards is still Black / Gray. What am i missing ?

    • Hey,

      To utilize the backgrounds that come with the themes, add this to your lovelace-ui.yaml:

      background: var(--background-image)

      Cheers

      • Thank you for letting me know but i do not have lovelace-ui.yaml file. I created one in the same directory where the configuration.yaml and added this line but.

        • The lovelace-ui.yaml refers to the default view dashboard file. You can add the code in Lovelace Storage Mode by clicking the three dots in the top right corner, Edit Dashboard, clicking again, Raw Configuration Editor.
          Add the background variable here at the top.

          Cheers

          • Thank you again for pointing this out. I have followed the instructions and have added the entry in the Raw Configuration editor. Also have set the theme to ios-dark-mode-blue-red. I get the top ribbon showing my views to render in blue color but the area where my cards are is still in black.

          • Hello
            Looking in the URL in the ios-theames.yaml it refers to /hacksfiles/themes/ios-themes/
            but my ios-theames folder is under /config/themes/ios-themes
            so do i need to change the above path in the ios-theames.yaml for image location?

          • Should not be the case, but please change it to the following (example):

            ios-light-mode-dark-green-alternative:
            # Global
            background-image: "center / cover no-repeat fixed url('/local/ios-themes/homekit-bg-dark-green.jpg')"

            Local = config

            Save the file, reload themes and refresh browser (CTRL + F5)
            Cheers

          • I have tried what you have suggested and also tried with /local/ios-themes, /local/themes/ios-themes, /config/ios-themes, /config/themes/ios-themes and then tried different browsers with private mode etc. but with no luck
            is there anywhere else one can set background to views? as i am thinking that unknowingly i may have done that but i do not have much of the yaml code.
            one thing to note, whenever i login using fresh incognito mode the theme default to backend selected in my profile and I have to change it to one of the ios theme. is that something expected ?

          • Yes, themes are saved per login session. Going incognito loads the page without cache, so it defaults to the backend theme.
            You possibly have an error in your code somewhere, maybe send me a screenshot @ admin@smarthomescene.com and I will take a look.
            Because I just tested this, it works on my end.

            Cheers

          • Hello,
            the way this worked for me is
            Created the folder in ios-themes in www. copied all the image files from /config/themes/ios-themes/ to www/ios-themes/
            Changed the line for image path in the /ios-themes.yaml to
            background-image: “center / cover no-repeat fixed url(‘/local/ios-themes/homekit-bg-dark-green.jpg’)”
            The theme looks amazing so thanks a lot for all the help in this matter.
            Regards,
            Amey..

    • Hello VS,

      The first one is an input select helper. You can create one by navigating to:
      Settings > Devices & Services > Helpers > Click + Create Helper > Dropdown.
      You add your themes names as a list here.

      The second one is an automation. You can recreate it by navigating to:
      Settings > Automations & Scenes > Click + Create Automation > Start with an empty automation.
      Click the three dots at the top and select Edit in YAML mode. Paste the code from the example and adjust entity names accordingly.

      That’s it! Cheers!

Comments are closed.