HA 2022.3 changed something, Caule now display's badly

[BebeMischa]

Hello,

after the HA 2022.3 update the view when using Caule themes 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 in this?

[chinyaolin]

same issue

[YaBoiDan]

I use the Caule Dark Yellow theme, and I added the below at the end of that theme section in the caule-themes-pack-1.yaml file to fix the issues I saw. This will likely vary a little if the theme is updated by @orickcorreia, but it allows you to read text and not burn your retinas if you're used to dark mode for now.

  # New
  mdc-text-field-fill-color: var(--primary-background-color)
  mdc-text-field-ink-color: var(--primary-text-color)
  mdc-select-fill-color: var(--primary-background-color)
  mdc-text-field-label-ink-color: var(--secondary-text-color)
  input-fill-color: var(--primary-background-color)
  input-ink-color: var(--primary-text-color)
  input-label-ink-color: var(--primary-text-color)
  input-disabled-fill-color: var(--primary-background-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-disabled-label-ink-color: var(--disabled-text-color)
  input-idle-line-color: var(--primary-background-color)
  input-dropdown-icon-color: var(--secondary-text-color)
  input-hover-line-color: var(--primary-color)
  code-editor-background-color: var(--secondary-background-color)
  codemirror-property: var(--accent-color)
  app-header-background-color: var(--primary-color)
  app-header-text-color: var(--primary-text-color)
  sidebar-background-color: var(--primary-background-color)
  paper-item-icon-color: var(--disabled-color)
  paper-item-icon-active-color: var(--primary-color)
  paper-slider-secondary-color: var(--light-primary-color)
  label-badge-green: rgb(128, 200, 132)
  label-badge-yellow: rgb(223, 194, 113)
  label-badge-gray: rgb(95, 98, 103)
  paper-dialog-background-color: var(--ha-card-background)
  switch-checked-button-color: var(--primary-color)
  switch-checked-track-color: var(--light-primary-color)
  data-table-background-color: var(--primary-background-color)
  mdc-checkbox-unchecked-color: var(--disabled-color)
  material-background-color: var(--secondary-background-color)
  material-secondary-background-color: var(--primary-background-color)
  mdc-theme-surface: var(--primary-background-color)
  mdc-select-ink-color: var(--primary-text-color)
  mdc-select-label-ink-color: var(--secondary-text-color)
  mdc-select-idle-line-color: var(--primary-text-color)
  mdc-select-dropdown-icon-color: var(--secondary-text-color)
  mdc-select-hover-line-color: var(--primary-color)

Hopefully that helps!

[chinyaolin]

I use the Caule Dark Yellow theme, and I added the below at the end of that theme section in the caule-themes-pack-1.yaml file to fix the issues I saw. This will likely vary a little if the theme is updated by @orickcorreia, but it allows you to read text and not burn your retinas if you're used to dark mode for now.

Hopefully that helps!

Nice Job! works for me

[BebeMischa]

@orickcorreia Can you please let us know, if you are reading this? I'm worrying, that we de do not get any help, as there are some issues even from last year without any response...
Then we at least know, we have to find another ways....

[darthsebulba04]

I modified the above changes to change the input fill colors to be a little closer to the card background. Works well on all the dark glass themes.

mdc-text-field-fill-color: var(--ha-card-background)
mdc-select-fill-color: var(--ha-card-background)
input-fill-color: var(--ha-card-background)
input-disabled-fill-color: var(--ha-card-background)

[BebeMischa]

Thanks, @YaBoiDan and @darthsebulba04 very much

I used your edits and I'm very happy with the result 👍

[BebeMischa]

@orickcorreia Are you still around?

[BebeMischa]

Well, seems like we lost @orickcorreia :-(

[jochke]

I use the Caule Dark Yellow theme, and I added the below at the end of that theme section in the caule-themes-pack-1.yaml file to fix the issues I saw. This will likely vary a little if the theme is updated by @orickcorreia, but it allows you to read text and not burn your retinas if you're used to dark mode for now.
Hopefully that helps!

Works great with my preferred Caule Black Purple Glass theme.
Thanks for finding the fix!

[BebeMischa]

Just to inform, this issue is not solved with 1.3.2

[ricardoquecria]

Fixing wrong colors in new versions of HA

[ricardoquecria]

Download the master branch if you want to keep up with the fixes.

I use the Caule Dark Yellow theme, and I added the below at the end of that theme section in the caule-themes-pack-1.yaml file to fix the issues I saw. This will likely vary a little if the theme is updated by @orickcorreia, but it allows you to read text and not burn your retinas if you're used to dark mode for now.

  # New
  mdc-text-field-fill-color: var(--primary-background-color)
  mdc-text-field-ink-color: var(--primary-text-color)
  mdc-select-fill-color: var(--primary-background-color)
  mdc-text-field-label-ink-color: var(--secondary-text-color)
  input-fill-color: var(--primary-background-color)
  input-ink-color: var(--primary-text-color)
  input-label-ink-color: var(--primary-text-color)
  input-disabled-fill-color: var(--primary-background-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-disabled-label-ink-color: var(--disabled-text-color)
  input-idle-line-color: var(--primary-background-color)
  input-dropdown-icon-color: var(--secondary-text-color)
  input-hover-line-color: var(--primary-color)
  code-editor-background-color: var(--secondary-background-color)
  codemirror-property: var(--accent-color)
  app-header-background-color: var(--primary-color)
  app-header-text-color: var(--primary-text-color)
  sidebar-background-color: var(--primary-background-color)
  paper-item-icon-color: var(--disabled-color)
  paper-item-icon-active-color: var(--primary-color)
  paper-slider-secondary-color: var(--light-primary-color)
  label-badge-green: rgb(128, 200, 132)
  label-badge-yellow: rgb(223, 194, 113)
  label-badge-gray: rgb(95, 98, 103)
  paper-dialog-background-color: var(--ha-card-background)
  switch-checked-button-color: var(--primary-color)
  switch-checked-track-color: var(--light-primary-color)
  data-table-background-color: var(--primary-background-color)
  mdc-checkbox-unchecked-color: var(--disabled-color)
  material-background-color: var(--secondary-background-color)
  material-secondary-background-color: var(--primary-background-color)
  mdc-theme-surface: var(--primary-background-color)
  mdc-select-ink-color: var(--primary-text-color)
  mdc-select-label-ink-color: var(--secondary-text-color)
  mdc-select-idle-line-color: var(--primary-text-color)
  mdc-select-dropdown-icon-color: var(--secondary-text-color)
  mdc-select-hover-line-color: var(--primary-color)

Hopefully that helps!

Download the master branch if you want to keep up with the fixes.

[NeeeeB]

@orickcorreia do you plan to release a 1.3.3 version with official fixes for the missing colors ?
I've installed your theme with HACS and would rather not update it manually...
thx

[BebeMischa]

Same thoughts here ;-)

[ricardoquecria]

I will do this until tomorrow =)

[BebeMischa]

Thank you very much for the fix! 🥇