Theme need update as from HA Core 2022.3.0

[XalaTheShepard]

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?

[jybi89]

i have a same issue :/

[basnijholt]

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.

[XalaTheShepard]

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.

[XalaTheShepard]

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.

[jybi89]

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 :)

[XalaTheShepard]

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)

[XalaTheShepard]

The changes are proposed in the code.
Feel free to test them out and leave a comment.

[basnijholt]

Thanks a lot! I'll try to make those changes tonight or tomorrow. 🥳

[basnijholt]

Please let me know whether the latest commit that I pushed works: 4ae686d

[XalaTheShepard]

I think something went wrong. My changes were not pushed through, causing the same issue.

[XalaTheShepard]

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.

[basnijholt]

Done!

[XalaTheShepard]

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.

[XalaTheShepard]

This should be the result that I expect with the last line added

[basnijholt]

@Gurutasker made a PR where that line is added.

If I can get a confirmation that it works, I will release a new version.

[JensJott]

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

[basnijholt]

I have added your suggestions.

[JensJott]

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

[basnijholt]

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?

[Gurutasker]

Working much better now thank you.