Better dark mode color palette

[Josh-Cena]

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.

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:

[lex111]

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

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]

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

Less eye strain

More eye strain

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

[lex111]

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]

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

[slorber]

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?

[pixelass]

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