I just learned that there’s certain CSS variables (e.g. dialog-backdrop-filter) that only work when specified in the ‘user theme’, but not in the dashboard-specified theme. (I discovered it through this off-hand comment on a browser_mod issue.)
From what I could find, there isn’t really a user theme, is there? There’s just a default theme you can choose and which is probably stored in your browser instance, so it isn’t even sticky to your user account across devices.
I find that very surprising and confusing, and would like to learn more about what the reason for this differentiation is, and what other variables this ‘rule’(?) applies to.
Background: I’ve created a theme, which I’m using on a single dashboard. It’s really designed for this dashboard only. It’s not intended to be used across HA and really makes the general UI look broken, so I do not intend to select this as my ‘default theme’ across HA.
I just use it to factor out common definitions so I don’t need to repeat them over and over. This discovery makes me question whether that’s a viable approach. I now also suspect that this is why I’ve been going crazy unsuccessfully trying to set certain things with card_mod, specifically for browser_mod.popup dialogs.
Why do certain variables only work in ‘user themes’? Or was that statement I found incorrect? (I could seemingly reproduce this, however – but maybe I’m misinterpreting my unstable test results.)
Is there a better place to do dashboard-specific theming (e.g. setting CSS variables) than in a one-off theme?
I think the reference to user themes are to what can be user defined in the theme.yaml file.
Some CSS settings added to this file do not seem to take effect though and those are then said to not be in the user theme.
Define primary-background-color and dialog-backdrop-filter in a new theme, e.g. themes/css-var-test-theme.yaml. (Register in your configuration.yaml as needed.)
css-var-test-theme:
ha-card-background: green
primary-background-color: hotpink
dialog-backdrop-filter: blur(30px) brightness(0.5)
Create a new YAML dashboard. Set:
views:
- title: Test Dashboard
theme: css-var-test-theme # <-- the dashboard theme!!!
cards:
- type: tile
entity: light.some_light_or_other_test_device
Note that the dashboard activates the theme!
Restart HA to load the new theme.
Open the dashboard. Notice the atrocious colors on card and background. However, open the ‘more-info’ dialog and take note of the backdrop filter not being applied!
Now navigate to your profile page and set the same theme, that the dashboard already activated, again!
Reload the dashboard with the doubly-activated-theme and open the ‘more-info’ dialog on your tile. Only with the theme selected twice, the dialog-backdrop-filter takes effect!