Lovelace theme basics

Share your Projects! Dashboards & Frontend
1

Dear forum

Basic question around lovelace, I’m wondering how themes work in the lovelace interface:

in configuration.yaml, I’ve included a themes.yaml:
In the themes.yaml I’ve copied a few themes from here: GitHub - maartenpaauw/home-assistant-community-themes: All community themes in one repository

#default_config:

frontend:
themes: !include themes.yaml

lovelace:
mode: yaml

in ui-lovelace.yaml, my layout starts like this:

title: My Awesome Home
theme: dark_cyan
views:
# View tab title.

  • title: Weather
    cards:
    …

This results in nothing and just keeps using the default theme.

  1. If I add the theme to a tab (here Weather), it gets used in the cards but not in the general layout (so background is still white, top banner still blue, … .

title: My Awesome Home
theme: dark_cyan
views:
# View tab title.

  • title: Weather
    theme: dark_cyan
    cards:
    # The markdown card will render markdown text.
    • type: entities

So question: how should themes be used in this ui-lovelace or where does the relevant documentation live?

thanks!

2

That’s the question.
Normaly the theme is set in the user settings of HA.

3

click the hamburger > then your user icon> then choose a theme. That is the global theme that gets used. Themes used within each section of the ui in lovelace is independent of each other and will only affect that panel.

Is that what you’re looking for?

If you look on this page it says it about mid ways down

    # Each view can have a different theme applied. Theme should be defined in the frontend.
    theme: dark-mode
4

then your user icon> then choose a theme. That is the global theme that gets used. Themes used within each section of the ui in lovelace is independent of each other and will only affect that panel.

Thank you, through the GUI it works indeed by selecting the theme.
But I prefer to have my full configuration in the .yaml files, so I have a clean backup and not a mixture of gui-modifications and scripts. The suggestion in your link does not have the same effect (it’s what I’ve tried in my first post), only the cards itself get the theme-background/layout.

thanks

1 Like
5

Thank you, through the GUI it works indeed by selecting the theme.
But I prefer to have my full configuration in the .yaml files, so I have a clean backup and not a mixture of gui-modifications and scripts.

What? Everything is done through yaml. These aren’t gui modifications.

The suggestion in your link does not have the same effect (it’s what I’ve tried in my first post), only the cards itself get the theme-background/layout.

Yeah, that’s whats supposed to happen. If you want a global change you need to have a theme that defines your CSS. Selecting it through the ui is how people select what theme they want. If you want to do it through yaml then you need to make an automation that selects and changes themes. When you’re using a default theme that’s what you’re going to get, defaults.