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

A vintage, typewriter & parchment looking theme.

  • Modes: Light
  • Color: 1 available
  • Made By: Banditen01

9. UX Goodie Theme

Inspired by iOS Dark Mode by basnijholt

  • Modes: Dark
  • Color: 1 available
  • Made By: fi-sch

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)

Advertisement Advertisement

8. Sundown Theme

A nice, sunset theme with a smooth background.

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

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

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

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

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

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

5. Whatsapp Theme

WhatsApp inspired theme for Home Assistant

  • Modes: Light/Dark
  • Color: 1 available
  • Made By: robinwittebol

Advertisement Advertisement

4. MacOS Theme

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

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

3. Kibibit Theme

A milky glass theme for Home Assistant.

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

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

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

  • Modes: Light/Dark
  • Color: 1 available
  • Made By: einschmidt

Advertisement Advertisement

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.

  • Modes: Light/Dark
    Styles: Fluent/Metro
  • Color: 6 available
  • Made By: Madelena

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.


You can support this blog by buying us a coffee!

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

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