Theme doesn’t apply to YAML dashboard in Lovelace storage mode

[marcoisabella]

Checklist

• [X] I have updated to the latest available Home Assistant version.
• [X] I have cleared the cache of my browser.
• [X] I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

I wanted to give this dashboard a try: (https://github.com/VigoKrumins/hass-config)

But I need your help figuring out why the theme doesn’t apply if not selected in the user’s preferences.

I have a splitted config and a few UI Dashboards, so I had to configure my Lovelace in storage mode, which probably complicated things. I hope there is a fix. These are my main Yaml files.

When I select the UI dashboard they automatically show with the theme assigned in the view yaml. When I select the Minimal dashboard it shows with the Home Assistant default dashboard (that is the one I have selected for my user).

lovelace.yaml

lovelace:
  mode: storage

  dashboards:
    lovelace-yaml:
      mode: yaml
      title: Minimal P
      icon: mdi:home-assistant
      show_in_sidebar: true
      filename: ui-lovelace.yaml

ui-lovelace.yaml

button_card_templates: 
  !include_dir_merge_named button_card_templates

title: "Home Assistant"
theme: "Minimal"

kiosk_mode:
  hide_header: false
  non_admin_settings:
    kiosk: false

views: !include_dir_merge_list minimal-dash/

minimal-dash/overview.yaml

- type: custom:grid-layout
  name: Minimal Dash
  path: minimal
  icon: mdi:home
  layout:
    margin: 0
    padding: 0
...

Describe the behavior you expected

I expect the yaml dashboard to show with the theme assigned in the yaml file.

Steps to reproduce the issue

1. create the lovelace.yaml in storage mode
2. create the ui-lovelace.yaml to address the global settings of the views, and the theme.
3. create the view.yaml with the cards you want to show
4. set the theme in user preference to "Use default theme"
5. browse the UIs and check the theme applied ...

What version of Home Assistant Core has the issue?

Home Assistant 2023.10.1

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Safari Version 17.0 (19616.1.27.211.1) and Chrome Version 117.0.5938.149 (Official Build) (arm64)

Which operating system are you using to run this browser?

macOS Sonoma 14.0

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

[karwosts]

My understanding is that the theme should be attached to the view, not to the dashboard.

Can you try remove theme: key from ui-lovelace.yaml, and add it to minimal-dash/overview.yaml ?

[marcoisabella]

This configuration demands theme in the ui-lovelace.yaml. I tried to enter it in the dash as well but it doesn't seem to work.

[karwosts]

This configuration demands theme in the ui-lovelace.yaml.

I have no idea what this means.

I tried to enter it in the dash as well but it doesn't seem to work.

Can you post this updated yaml that you attempted?

[marcoisabella]

This configuration demands theme in the ui-lovelace.yaml.

I have no idea what this means.

I don't know if you are familiar with splitted configuration. But you can't remove the theme line from the file, the configuration check will fail.

I tried to enter it in the dash as well but it doesn't seem to work.

Can you post this updated yaml that you attempted?

Easy:

  name: Minimal Dash
  path: minimal
  theme: minimal
  icon: mdi:home
  layout:
    margin: 0
    padding: 0

Reading the instruction here, you can see that they want you to set the theme in the user settings, but on the HA discord they were saying it should work anyway, since many had it configured it.

[karwosts]

Sorry but I don't think you will find any support for minimalist here, this issue tracker is for non-custom related issues only.

If you want to pursue this here suggest coming up with a minimal reproduceable example that does not involve any custom resources.

[marcoisabella]

I understand the desire to close this issue as soon as possible. But it ha la nothing to do it with it.

just try to enter your Lovelace in storage mode. Have your UIs and create a dashboard in YAML. Split the config and check if the theme gets applied. You don’t need to install any custom integration. It’s all about HA.

Also, I appreciate your help, I know very little about HA, but I wouldn’t try to help fixing other’s issue on here.

[karwosts]

I understand the desire to close this issue as soon as possible. But it ha la nothing to do it with it.

That's why I asked to create a minimum reproducable example, so we can find out if it is a HA issue or a custom issue.

just try to enter your Lovelace in storage mode.

OK

configuration.yaml

lovelace:
  mode: storage
  # Add yaml dashboards
  dashboards:
    lovelace-yaml:
      mode: yaml
      title: YAML
      icon: mdi:script
      show_in_sidebar: true
      filename: dashboards.yaml

Have your UIs and create a dashboard in YAML. Split the config ...

OK dashboards.yaml

title: My Awesome Home
views: !include_dir_merge_list yaml-dash/

yaml-dash/view.yaml

  - title: Example
    theme: happy
    cards:
        # The markdown card will render markdown text.
      - type: markdown
        title: Dashboard
        content: >
          Welcome to your **dashboard**.
      - type: entities
        entities:
          - sensor.grocy_chores
          - sensor.grocy_tasks

and check if the theme gets applied.

It does, it works great. The yaml dashboard view "Example" has the happy theme applied, which is a different theme than any other on my dashboard, and different from what I have selected in my user profile.

So when I try just with stock HA features, this seems to be working as intended. If you can show some case where it is not working as intended (not using custom resources), than please update and we can look further.

[marcoisabella]

The only difference I see is that I don't enter the lovelace configuration in the configuration.yaml but in the lovelace.yaml. Let me try to transfer it they way you did.

[marcoisabella]

I replicated your config with a dark theme assigned to it. It does not work. What can it be?

[karwosts]

Dark mode/light mode is a whole other can of worms, and a complex topic to discuss. It might be good to establish if it works for themes in general aside from that first?

But basically my understanding is that if your profile is set to Light, or if the profile is set to Auto and the browser/OS is in a light mode, than the default light mode theme is used as the base for the theme.

But this is the case for themes in general (you can confirm on your profile page), and nothing specific to per-view theming.

[marcoisabella]

Dark in color, black bar and grey tiles. It's not dark mode theme.

[marcoisabella]

If I select it for the user preferences, it's all good. But the config as you tested it would not. Is there anything else I should look into?

[karwosts]

All I can point out is that I think the per-view theme does not affect the header bar, I think it only affects the cards on the view (and maybe the view background).

So given your screenshot of "My Awesome Home" it's difficult to tell if the theme is actually being applied there or not, since the only themable elements there seem to be black text on a white card background, which might match the theme. Try setting happy text color to something obvious (not black?)?

[karwosts]

As an example, here's my (admittedly grotesque) happy theme applied to the whole dashboard:

And here it is applied just to the view, with the default theme selected overall.

Notice the per-view theme only applies to the elements inside the view's page, not the overall navigation elements.

[marcoisabella]

Got it. So if I change the theme in a more bright understandable color scheme: I will have this:

If I leave Use Default Theme I got this:

[marcoisabella]

adding the theme yaml:

  modes:
    light:
      primary-background-color: "#232090"
      primary-text-color: "#06dee3"
      card-background-color: "#d28fec"

      sidebar-background-color: "#FFFFFF"
      sidebar-border-color: "#faf050"

      app-header-background-color: "#000000"
      app-header-text-color: "#FFFFFF"

      color-black: "0, 0, 0"
      color-white: "255, 255, 255"
      color-yellow: "254, 215, 102"
      color-orange: "255, 145, 1"
      color-red: "222, 60, 75"

    dark:
      primary-background-color: "#121212"
      primary-text-color: "#DDDDDD"
      card-background-color: "#1D1D1D"

      sidebar-background-color: "#202020"
      sidebar-border-color: "#2F2F2F"

      app-header-background-color: "#000000"
      app-header-text-color: "#FFFFFF"

      color-black: "0, 0, 0"
      color-white: "255, 255, 255"
      color-yellow: "252, 214, 99"
      color-orange: "255, 145, 1"
      color-red: "222, 60, 75"

[marcoisabella]

You are right. The per-view theme applies only to the cards and the backgrounds: no left menu or top bar. To change them, you need to apply it to the user's preferences.

So, this is not an issue but an expected behavior that I could not clarify myself. Thank you!