bbbenji / synthwave-hass

Synthwave inspired theme for Home Assistant
MIT License
154 stars 24 forks source link

Unreadable text in some field since 2022.3 HA core update #37

Closed sk8er000 closed 2 years ago

sk8er000 commented 2 years ago

I've installed the regular theme and Synthwave Hass Extras a while ago but since 2022.3 some parts are become unreadable. The YAML fields (like when adding something on lovelace or creating an automation) have white background an white text for regular characters so you ca't read anything unless you select all the text. Some other field like the filter fields on the developer tools page are barely readable since there are black characters on dark violet background

Jugrnot commented 2 years ago

Interestingly, I just discovered this very recently as an issue myself. Guess it's been just long enough since I've been digging through my automations that this became an issue. Did a little digging through the code for this theme and figured up a really quick workaround.

Edit /config/themes/synthwave/synthwave.yaml file and add the following at the at the bottom. Note, make sure the indent is correct, as with editing any other yaml:

input-fill-color: '#999999'

I struggled far longer trying to pick a color I liked for text entry box background colors than it took to figure out the workaround. #999999 you can replace with whatever color you'd prefer, which is the standard html color formatting. Light-ish grey seems the easiest on my eyes, but feel free to pick whatever you'd like.

Disclaimer; I only spent about 2 minutes looking through the rest of my dashboard to see if this has impacted anything else negatively, so let me know if you find anything it broke.

sk8er000 commented 2 years ago

Thats great! This fixed the most relevant part! The only other thing I noticed is the search fields that are black text on dark backgroud and can be hard to read in a low brightness scenario:

Screenshot 2022-03-12 09 42 58 Screenshot 2022-03-12 09 42 34 o

Can it be fixed too? I didn't find the right line on the yaml to change the color with something brighter thank you in advance

Jugrnot commented 2 years ago

Yeah, I didn't notice that one initially either. For the text in the search box (text you type, not the background label) try adding:

input-ink-color: '#FFFF00'

For the background text in search/entry boxes, add this:

input-label-ink-color: '#FFFF00'

Obviously pick whatever color you're interested in those being. I used yellow for testing so whatever I changed would really stand out. Let me know if you find anything else we can address, then maybe if I have time we can propose a branch to update the original code? I really dig this theme because of how easy everything is to see in bright light or a dark room and would love to see it continue to live on.

Edit: For what it's worth, I tried searching for a legend or document outlining what these (CSS I think?) properties are, and really couldn't find anything very detailed so I'm just comparing with a different theme called "AMMOLED_BLUE" I found before Synthwave.

sk8er000 commented 2 years ago

That's great! Now everything is readable again! It would be great to update the original codde so that if someone need to use it won0t have to modify the yaml. I've tried to reuse some color already on the theme and it's quite readable:

  input-fill-color: '#2a2139'
  input-ink-color: '#ffcc00'
  input-label-ink-color: '#72f1b8cc'
bbbenji commented 2 years ago

@sk8er000 are you comfortable enough with GIT to submit a PR?

bbbenji commented 2 years ago

@sk8er000 @Jugrnot please update and let me know if your issues are resolved.

Thanks for the PR's @MatthewGlancy

Jugrnot commented 2 years ago

Just updated and everything I've seen so far looks great! Thanks for the update and apologies for the delay getting back to you.