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 frontend: 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

Advertisement

A vintage, typewriter & parchment looking theme.

9. UX Goodie Theme

Advertisement

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

Advertisement

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: https://fonts.googleapis.com/css?family=Raleway

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

Advertisement

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

5. Whatsapp Theme

Advertisement

WhatsApp inspired theme for Home Assistant

4. MacOS Theme

Advertisement

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

3. Kibibit Theme

Advertisement

A milky glass theme for Home Assistant.

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

resources: - url: https://fonts.googleapis.com/css?family=Comfortaa&display=swap type: css
Code language: YAML (yaml)

2. Github Light & Dark Theme

Advertisement

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

1. Metrology

Advertisement

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 input_select: themes: name: Themes icon: mdi:format-paint options: - "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 trigger: - platform: state entity_id: input_select.themes action: - service: browser_mod.set_theme data: 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.



By visiting the Amazon, AliExpress and Banggood stores through the links above, you are shopping through our affiliate links.
This incurs no additional cost to you and supports smarthomescene.com in the form of sales commission.
SmartHomeScene © 2022 All rights reserved Privacy Policy | Contact Us | Support


By visiting the Amazon, AliExpress and Banggood stores through the links above, you are shopping through our affiliate links. This incurs no additional cost to you and supports smarthomescene.com in the form of sales commission.
SmartHomeScene © 2022 All rights reserved
Privacy Policy | Contact Us | Support

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

Leave a Reply to FanHere Cancel Reply

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

Scroll to Top