Theme need update as from HA Core 2022.3.0
XalaTheShepard opened this issue · 20 comments
Hello,
After the HA 2022.3 update the view when using IOS dark mode theme has changed. All input fields are now white, not following the theme.
This makes some fields unreadable.
I think, the theme has to be updated.
Can you please have a look at this issue?
i have a same issue :/
I have no means to debug this at the moment, I am moving internationally and do not have a permanent house at the moment (so no HA either.)
If anyone knows which attribute has to change, they can make a PR or just tell me and I will do it.
Already have a solution for this specific theme. This is the first time I implement changes to a project, so will try to figure it out how to add them.
I have no means to debug this at the moment, I am moving internationally and do not have a permanent house at the moment (so no HA either.)
If anyone knows which attribute has to change, they can make a PR or just tell me and I will do it.
I have noticed that you have other themes as well on GitHub. Shall I also take a look at them? I am currently involved in multiple projects, so those themes will take me a longer while. For this one, as it is my main theme, I took already some time past week.
i have resolve an issue with add this code in my theme :
i have add this https://community.home-assistant.io/t/2022-3-select-and-play-media/398201/193 :)
I have changed the following:
primary-text-color: "#FFF"
paper-slider-knob-color: "#FFF"
into
primary-text-color: "#FFFFFF"
paper-slider-knob-color: "#FFFFFF"
Furthermore added the following code at the bottom:
mdc-text-field-fill-color: var(--card-background-color)
mdc-text-field-ink-color: var(--primary-text-color)
mdc-select-ink-color: var(--primary-text-color)
mdc-select-fill-color: var(--card-background-color)
The changes are proposed in the code.
Feel free to test them out and leave a comment.
Thanks a lot! I'll try to make those changes tonight or tomorrow. 🥳
Please let me know whether the latest commit that I pushed works: 4ae686d
I think something went wrong. My changes were not pushed through, causing the same issue.
Only the changes to the primary text color and the slider knob color were pushed through.
I have reproposed the 4 new lines that need to be added.
Done!
One last change. I noticed that for some reason the label -ink-color did not update. Added one last line and then everything should be fine. When this theme is complete updated, I will register all these changes for your other themes as well.
This should be the result that I expect with the last line added
@Gurutasker made a PR where that line is added.
If I can get a confirmation that it works, I will release a new version.
here's my complete list to play around with:
mdc-text-field-font-color: var(--primary-text-color)
mdc-text-field-fill-color: var(--card-background-color)
mdc-text-field-ink-color: var(--primary-text-color)
mdc-text-field-label-ink-color: var(--secondary-text-color)
mdc-select-fill-color: var(--card-background-color)
mdc-select-label-ink-color: var(--secondary-text-color)
mdc-select-ink-color: var(--primary-text-color)
mdc-select-idle-line-color: var(--secondary-text-color)
mdc-select-dropdown-icon-color: var(--primary-text-color)
mdc-select-hover-line-color: var(--secondary-text-color)
input-ink-color: var(--primary-text-color)
input-label-ink-color: var(--secondary-text-color)
input-disabled-ink-color: var(--secondary-text-color)
input-disabled-fill-color: var(--card-background-color)
input-fill-color: var(--card-background-color)
input-dropdown-icon-color: var(--primary-text-color)
input-idle-line-color: var(--secondary-text-color)
input-hover-line-color: var(--secondary-text-color)
works really nice.
e: well, some more bugs. in the developer tools, try different services that have fields with unit seperators. their text is black and hence not readable. did not yet find out why...
I have added your suggestions.
Original Theme has the same issue. I think the problem is the "ha-textfield" has no "class".
I opened a Bug Report here: home-assistant/frontend#11988
People have suggested multiple alternatives, this is what we have now:
# Below contain alternatives that have been proposed in comments
mdc-text-field-fill-color: var(--card-background-color)
# mdc-text-field-fill-color: var(--ha-card-background)
mdc-select-fill-color: var(--card-background-color)
# mdc-select-fill-color: var(--ha-card-background)
input-label-ink-color: var(--secondary-text-color)
# input-label-ink-color: var(--primary-text-color)
input-disabled-ink-color: var(--secondary-text-color)
# input-disabled-ink-color: var(--disabled-text-color)
input-disabled-fill-color: var(--card-background-color)
# input-disabled-fill-color: var(--ha-card-background)
input-fill-color: var(--card-background-color)
# input-fill-color: var(--ha-card-background)
input-dropdown-icon-color: var(--primary-text-color)
# input-dropdown-icon-color: var(--light-primary-color)
input-idle-line-color: var(--secondary-text-color)
# input-idle-line-color: var(--card-background-color)
input-hover-line-color: var(--secondary-text-color)
# input-hover-line-color: var(--light-primary-color)Can someone tell me whether some lines in the comments might be better or not?
Working much better now thank you.