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.

  • Modes: Dark
  • Color: 1 available
  • Made By: aFFekopp

9. CyberPunk 2077 Theme

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

  • Modes: Dark
  • Color: 1 available
  • Made By: flejz

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

  • Modes: Light/Dark
  • Color: 49 available
  • Made By: mikosoft83

Advertisement Advertisement

7. Caule Theme Pack

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

  • Modes: Light/Dark
  • Color: 40 available
  • Made By: orickcorreia

6. Amoled Blue Theme

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

  • Modes: Dark
  • Color: 1 available
  • Made By: JuanMTech

5. Google Theme

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

  • Modes: Light/Dark
  • Color: 2 available
  • Made By: JuanMTech

4. Noctis

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

  • Modes: Dark
  • Color: 1 available
  • Made By: aFFekopp

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.

  • Modes: Dark
  • Color: 1 available
  • Made By: robb0wen

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.

  • Modes: Light/Dark
  • Color: 2 available
  • Made By: tgcowell

Advertisement Advertisement

1. iOS Themes

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

  • Modes: Light/Dark
  • Color: 28 available
  • Made By: basnijholt

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


You can support this blog by buying us a coffee!

Leave a Comment

Your email address will not be published.

DISCLOSURE
SmartHomeScene.com is a participant in the Amazon Services LLC Associates Program and AliExpress Portals Affiliate Program. 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.
SmartHomeScene.com

Scroll to Top