Hello Community,
After getting Home Assistant to work for the first time I spent some time creating themes. I am however, running into a problem changing the primary color. The top bar seems to be linked to the text in several sections:
The result is that if I change the top bar color to something dark that fits the theme, the text becomes almost unreadable. Has anyone found a workaround for this or is there something that I am missing?
Iâve looked at a few dark themes and they all see to have the same issue. TBH Iâve found theming HA to be frustrating at best and downright irritating at times 
For the particular screen youâre showing there you can change the background of the table, might be able to find something that works with the text and your theme.
table-row-background-color:
table-row-alternative-background-color
Iâve been focusing on getting the bits the users see right and the admin / developer bits usable, as only I use them.
some possible good news on this one (although, Iâve not tried it yet)
it now looks like compact custom header will allow you to set the background of the top bar, separately to the theme primary-color variable 
Also, someoneâs already raised an issue, no idea if itâs being looked or when it might be addressed though.
Thank you for the reply. I am already using the Compact Custom Header and it is totally awesome (in my opinion it should be integrated in the home assistant core, even if just as an option). You can use the custom header as a workaround, although some people (like me) try to have a few custom addons as possible because they sometimes break something on upgrades. 
Too bad theming is currently so limited because of these hard links. I think weâd have much more user made themes if it were a little bit more flexible. I hope someone can have a look at it in the future.
Ps. good find on that issue, I wonder why I did not see it in my results. 
Hey - I have noticed similar things. I actually created a âreference themeâ, where every item has a different color, so I can determine which color variables affect which aspect of the themes.
As you can see, the âentity IDâ is the same color as my background, here in the âlogbookâ tab. Now as far as I can tell, this is because the âprimary-background-colorâ (the background) and the âprimary-colorâ (used for this text!?) are not adequately contrasted. But in many themes we want these to be very similar!
Is there a way around how these colors are assigned? This is a real pain in the arse - so many variables available for text, and we keep seeing examples where the main background variables are used instead⌠argh
Has there been anything on this? Seems like a no brainer.
I am facing this issue as well. anyone found a solution? addressing themeing should be easy and we could pool together to create a template with all ui parts and address them separately so that themeing can be a little bit hassle free.
Are there seriously no answer to this question. It is 2021 now, and this is still a problem? Who thought that this was a good idea, to use primary-color as text color somewhereâŚ
If you have concrete examples with the default HA themes, open a ticket in the frontend repository. The screenshots in this thread a very outdated and I cannot see any issue in the default themes in the logbook.
Itâs not an issue that gives errors though, so an issue on GitHub will not be the right way of tackling this problem. And the screenshots might be old, but it still depict the problem exactly as it is.
What we need is a confirmed list of all possible variables you can change in a theme with maybe descriptions. Because everyone is trying to make a file with all possible variables, but itâs just guess work and no one has found the variable that change the color of link texts.
The screenshot shows this, itâs a link and it uses the var(âprimary-color) as color styling. What I, and many more, want to achieve is change the color of those texts.
I want to have the navigation bar at the top to be grey and I also want the cards to be the same gray. So when I do that, the background of all text is gray, but the text that are links is the same color of gray, because it uses the same color as the top navigation bar. That is very dumb.
I get the point reg. documentation. It is a bit tricky. I started looking into that.
For the concrete issue: You can set âapp-header-background-colorâ and âapp-header-text-colorâ that control the header bar colors independent of the âprimary-colorâ.
That sounds really good! I hope there will be something in the future so everyone has an easier time making themes.
Okay, thanks for the tip. I will try that when I have the time. Hopefully primary color doesnât change to much else, because where I really have the problem is with links in developer tools and integration page and such.
Links, icons, buttons (as a guide: most things you can interact with) use the primary-color.
Okay. But most other interactable stuff I can change with other theme variables. But I will give it a shot. Thanks for the help!
