Why do some variables work in themes and others do not?

Configuration Frontend
,
1

I’m running HAOS on a RP4, not a dev but reasonably technical. I use Noctis as a baseline theme for my dashboards (with some customization in the theme file itself, nothing crazy) and card_mod on specific cards as necessary to achieve specific results. Lately I’ve been trying to control more styling from the theme file itself vs. in-line card mod because it’s more scalable.

The problem:

  • A lot of styles are controlled via HA variables, for example var(--primary-color)
  • When I editing the Noctis theme file, the changes I make to existing variables usually apply without issue
  • I’ve also been able to add some new variables to the theme file that I find while using Dev Tools in chrome
  • Adding new variables seems to work sporadically and I cannot figure out what “should” work in a theme file vs. what won’t

Here’s an example: var(--control-slider-thickness) is a variable used in Tile Card to set the pixel height of the light brightness slider UI. Adding this variable to my noctis theme file to change the default size does nothing. Before the 2023.4 release I was able to change the height using a card mod rule, but the latest release broke it, and I don’t want this to be so fragile.

Why do some variables work when added to theme files and others don’t? I’ve spent hours trying to find information / docs that explain this or even acknowledge it and I can’t find anything.

2

There have been many changes to the frontend. Some older themes may be using out of date variables.

List of current variables:

3

Thanks @tom_l , but I don’t see var(--control-slider-thickness) in this list. That variable is used by Tile Card which is packaged with Home Assistant, so maybe my question is … If I can’t just add that variable to my theme file to change the value, where do I change it?

4

I would like to know this also