search

facebookincubator / infima

A UI framework that provides websites with the minimal CSS and JS needed to get started with building a modern responsive beautiful website
https://infima.dev
MIT License
408 stars 55 forks source link

Dark mode Badge text color contrast is bad #265

Open hasezoey opened 2 years ago

hasezoey commented 2 years ago

Currently the default Text color for badges in dark mode is way too white, which is not good to read: badges_now

But i had tried changing the text color to the same the buttons are set now: buttons_now

which would be the change of [data-theme='dark'] {--ifm-badge-color: var(--ifm-font-color-base-inverse);}, which would look like: badges_changed (Note: the Secondary overwrite is still in place for this screenshot)

this is just a small mockup (no testing or PR worthy) change but i think it is way better than just the white it was before

Tested and Screenshots from Linux Manjaro 21.3.0 with Firefox 101.0.1 on KDE Plasma Wayland

This issue is related to #192, but about a more specific part of it

Josh-Cena commented 2 years ago

Maybe you should override --ifm-color-secondary in dark mode, just like the docs suggest for the primary color? I certainly don't like the current palette.

hasezoey commented 2 years ago

Maybe you should override --ifm-color-secondary in dark mode

this issue is not specifically about secondary color, i just noted that i left the overwrite inplace and did not remove it, this issue is about that all other badges have white text in dark mode which does not contrast well

pixelass commented 5 months ago

I added a comment here that might help: https://github.com/facebookincubator/infima/issues/139#issuecomment-2093539041