Actually I had just recently noticed that all of my dividers seemed to be gone and couldn’t figure out why.
Is there any way to work around this?
Where is the divider row color defined?
It is divider-color now. Be careful though, this is the same color that is used for separation of main interface sections (main menu, top bar, user element in lower left corner, etc), so changing it might create some undesired side effect (see my post: 0.114: Dark mode, Open Z-Wave progress and more automation & scripts).
1 Like
Right, I saw that and I also saw that in my own config when I changed it in my theme.
Do you know of any way to get the old functionality back?
Do you know where the new color is defined for the divider? IOW, how does the divider know to use divider-color instead of some other variable?
Well, probably something changed in source code… sort of sorce code cleanup?
I’m now considering to switch to text-divider-row to separate this from what was done in 0.114. I modified the code to narrow top and bottom margins and to get rif of bold text and actulally it fits quite well my needs…
You can set a theme per card or panel with just the divider color, that way the divider color would only be set for that card or lovelace panel and not for the rest of the UI.
Yes, but again why should I change this manually for 30+ entities, while previous theme variable was working perfectly and was changed for no reason?
I’d use this functionaly on exception basis rather, if I need to change just few of dividers to other color…
It probably wasn’t changed for no reason, as nothing is changed without a reason.
It was changed to make the new dark mode work properly, and was not expected to be a major issue, but to add more consistency throughout our theme system.
I’m actually curious what the before and after for you theme was, and why this caused an issue for you.
I’m happy to add a specific theme variable for this if the use case is right.
OK, not really 1 to 1 match, since I already make some work compensating for this change and replaced standard divider with text-divider-row, but here are the screenshots, that might show why I do not like this change. The first one more less resembling my original theme (though with replaced divider):
The second shows the same screen, after implementation of change. Since I set divider color to background, to hide unwanted separation of main user interface components, it caused divider to blend with bakground:
And finally I corrected divider-color to specifically cyan, and this caused unwanted separator to show:
Hope this explain issue. Default dark theme uses separator that is sort on mid tone between dark gray and white, so it eventuallyt blends… with contrasting colors I’d like use it is not possible.
But the previous color used was secondary text color with opacity, so your secondary text color is the same as your primary color?
Anyway, I will add a variable for the divider row and the same for the section row.
2 Likes
Yes, this is exactly the case… both are set to cyan.
Perhaps this is mistake on my side, but it is result of lack of documentation… most of work I did with theme I use was done by experimentig with colors and verifying what changed.
I don’t know if this has been said because I haven’t read the thread. But I think the best option here would be a website/demo site with a list of variables that link directly to a fake HA interface. This would allow us to view in real time what attribute changes what color.
Edit: then you could build a fake theme and export it.
Edit2: there could be a menu bar on the right side while the left side is a normal HA instance. The menu bar would allow you to style and color all sorts of attributes
5 Likes
@petro, I really like the idea… 
though from here we are only step away from having theming build into HA itself! 
Perhaps that would be some add on that would allow to just click on specific element of UI, select the desired color and save to user theme or expert for others use… Dreaming a bit; it would allow to change font size and weight, or even manipulate card (border, shadow, margins or padding) 
@Bram_Kragten I just found another place, where divider-color variable is used - it is calendar. So after I recently reverted to this color being same color as backgroud (to have nice overal UI), all dividers in calendar blended with background 
:
Means that even if you add text-divider specific variable, there is now another place where differentiating these colors would be welcomed… at least for me…
Ive tried creating that in my own setup, simply have all theme variables listed and show the color in the active theme, please see How to create a test sheet for theme colors
it would be great if we could simply list all these and see what happens given the theme one has set/created.
obviously my attempt was flawed, maybe this could still be done in another way currently available?
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 
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.