What the heck: theming variables are changed without notification and proper documentation?

This works fine as long as you can list all color variables and can easily identify elements of UI via that colors. Unfortunatelly:

  • we do not have full, actual list of all color variables
  • some UI elements seems to be hardcoded or
  • some UI elements have default color value that is used, if corresponding variable is not used (which might be because it is not documented).

Similar effor was taken by @thomasloven: Theme-maker - a tool for designing themes, but I think further development was dropped…

would love this too and specifically seperate variables for the ‘back end’ pages like entities overview, supervisor,…

A theme that looks nice in lovelace will often result in unreadable text there. I fix this now with a custom .js file that overrides theme colors for those elements, but that’s very hackish and hard to maintain.

[promotion]
I recently went through HA’s frontend repo and looked for var(--. Here’s the results:

OK, so now we have a list of 211 variables that are used in HA itself (and probably big portion of these are not color or theme related). At least something to try :slight_smile:
But to be honest, I searched complete list just for ‘primary’ and ‘text’ and I found 4 different variables:

['--primary-text-color', 104]
['--text-primary-color', 19]
['--rgb-primary-text-color', 9]
['--text-light-primary-color', 4]

I think this only explain issue we have here… which one should be used? Which is primary variable and which are used in some special cases? Checking all of these combinations takes the time, especially that use for some of these might be very rare and hard to spot.
There are also some, that just can’t imagine the use:

['--eco-color', 1]
['--idle-color', 1]
['--unknown-color', 1]

That’s why I started this topic… so we can can get simplified (50 variable max?), well documented set of variables to be used for theming and potentially to eliminate some inconsistencies in these color use.

Sorry I didn’t post this earlier, but you can use this modified code to find where it shows up:

import glob
for filename in glob.glob("GitHub/frontend/**/*", recursive=True):
    try:
        file_contents = open(filename, encoding="utf-8").read()
        file_contents = file_contents.decode()
    except Exception:
        if "file_contents" in globals() and isinstance(file_contents, str):
            pass
        else:
            continue
    if "outlined" in file_contents:
        print(filename)
for var in sorted(vars_found, key=get_count):
    print(var)

In my case the code was in my Documents folder, and the frontend folder was in GitHub/frontend.

Just a little helper tool.

rgb- just means it’s an RGB representation (r, g, b format). And those weird ones were probably from the thermostat/humidifier card.