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
409 stars 55 forks source link

Better dark mode color palette #199

Open Josh-Cena opened 2 years ago

Josh-Cena commented 2 years ago

Our dark mode background is too dark. While it's fine for the Docusaurus website because the text is relatively sparse, as soon as the text gets dense, it literally hurts my eyes.

image

Not only is the background too black, but the admonition is too blue as well. The light mode contrast seems so much better.

GitHub and Twitter also have this problem (hence I never read long READMEs on GitHub), but VuePress's palette is very nice:

image

lex111 commented 2 years ago

Hmm, I don't have that much inconveniences when reading, but maybe we should darken foreground text color because it's probably bright a bit now. Just compare and let me know what works best for you:

Before After
image image

I actually like the color palette of Microsoft Docs, where the background is even darker than in Docusaurus. Wonder if you are comfortable reading their docs https://docs.microsoft.com/en-us/aspnet/core/introduction-to-aspnet-core?view=aspnetcore-6.0

Josh-Cena commented 2 years ago

Ah, I think their docs are good for me as well. I don't know what's the key here now 😄

Less eye strain

image image image

More eye strain

image image

It may be a combo of font, text density, and background/foreground contrast?

lex111 commented 2 years ago

Maybe so, although I would definitely tweak text color for dark mode. As another example, the new Vue.js site looks good in enabled dark mode: https://vuejs.org/guide/extras/ways-of-using-vue.html

Josh-Cena commented 2 years ago

Yes, whatever makes it look better, may not necessarily be the background 👍

slorber commented 2 years ago

Hey, also missed this issue.

I also find it uncomfortable to read a Docusaurus site in dark mode. For me the text is too bright.

In light mode it's fine right?

Would you agree on this change only in dark mode?

-    --ifm-color-content: var(--ifm-color-emphasis-900);
+   --ifm-color-content: var(--ifm-color-emphasis-700);

Not sure of the exact value to use, and it doesn't even fix the issue in all places though 😅

Here's what -300 do, the sidebar/toc/admonitions remain too bright, and maybe the navbar should remain bright?

image
pixelass commented 6 months ago

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