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.
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
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.
