infima icon indicating copy to clipboard operation
infima copied to clipboard

Published 20 hours ago • verified publisher icon facebookincubator

Dark mode Badge text color contrast is bad

Open hasezoey opened this issue 2 years ago • 3 comments

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

hasezoey avatar Jun 23 '22 11:06 hasezoey

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.

Josh-Cena avatar Jun 23 '22 11:06 Josh-Cena

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

hasezoey avatar Jun 23 '22 11:06 hasezoey

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

pixelass avatar May 03 '24 18:05 pixelass