Top 10 Home Assistant Lovelace Themes

UPDATE: Part 2 is here: Another Top 10 Home Assistant Lovelace Themes

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. 

Note: Pleas 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
Code language: YAML (yaml)

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
Code language: YAML (yaml)

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)
Code language: YAML (yaml)

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

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
Code language: YAML (yaml)

Screenshots



SmartHomeScene.com is a participant in the Amazon Services LLC Associates Program, AliExpress Portals Affiliate Program and Banggood Affiliate Programs. These programs are designed to provide means for websites to earn revenue by linking affiliate products through their content. We are compensated for referring traffic and business to these websites, incurring no additional cost to you as a consumer.
SmartHomeScene © 2023 All rights reserved Privacy Policy | Contact Us | Support


Amazon
Patreon
AliExpress
Buymeacoffee
Banggood
Ko-Fi

SmartHomeScene.com is a participant in the Amazon Services LLC Associates Program, AliExpress Portals Affiliate Program and Banggood Affiliate Programs. These programs are designed to provide means for websites to earn revenue by linking affiliate products through their content. We are compensated for referring traffic and business to these websites, incurring no additional cost to you as a consumer.
SmartHomeScene © 2023 All rights reserved
Privacy Policy | Contact Us | Support

2 thoughts on “Top 10 Home Assistant Lovelace Themes”

    1. Hello Henk,

      We’ve linked to their Github pages, but the easiest way would be to Install the via HACS.
      List search for the theme you are interested in and download it.

      Thanks for reading,
      SHS.

Leave a Comment

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

Scroll to Top