Docusaurus: Use CSS instead of JS for the default night-mode toggle

[Indicardo]

💥 Proposal

Switch away from a JS night-mode toggle, as JS has to load first and some users go through a quick flash when visiting the website. I really don't know the implementation details on this one, but it would be much better if done with CSS.

Have you read the Contributing Guidelines on issues?

Yes

[fanny]

Are you talking about the default value, right? Are you thinking in something like the prefer-color-scheme?

[slorber]

Hi @Indicardo

As far as I know, it's not possible to do this only with CSS, as the CSS can only read the (prefers-color-scheme: dark) media query, it cannot update this preference that is global for the computer/browser.

The user might prefer dark mode for a specific site, despite his default global preference being light mode.

We need to store the color scheme in some js storage (like local storage) so that it's possible for the user to switch from light to dark, despite the global (prefers-color-scheme: dark) staying constant over time.

I've not been able to find any css-only solution in the static ecosystem:
https://github.com/gaearon/overreacted.io/blob/master/src/html.js
https://github.com/insin/gatsby-plugin-dark-mode/blob/master/gatsby-ssr.js
https://github.com/wKovacs64/gatsby-plugin-use-dark-mode/blob/master/src/theme-hydration-script-tag.js

If you can link to a CSS only solution, I'm interested to read that, but I don't think it exists, so I'm going to close this issue for now.

as JS has to load first and some users go through a quick flash when visiting the website

The JS reading localstorage theme is inlined in the page, it runs very soon, before the content is displayed, so there's normally no quick flash. As dark mode does not exist in v1, I tested this in v2 and don't see any quick flash.

If you know a docusaurus site with a quick flash, please try upgrading to latest version, and if it does not work, give us a link to this site (and if possible its source code or an idea of the setup)

[Indicardo]

Hi @slorber

I was indeed refering to prefers-color-scheme. I considered this to be CSS-only as it doesn't require any dark-mode switch and instead relies on user settings. Now that I think of it, it would be cool to have both a switch and prefers-color-scheme.

As of the quick flash, we are currently seeing one @ https://pgm.dev. The source code for the website is available right here,

[slorber]

Hi @Indicardo, that's weird, I also see the flash, this only happens on your site and I don't see anything that should be the cause. It does not happen on other Docusaurus sites afaik.

Is master deployed?

Have you modified something regarding the theme?

I'm going to look at it.

[lex111]

In fact, in the case of the site https://pgm.dev, this issue is due to the Rocket Loader from CloudFlare, if you disable it, then quick flash will no longer appear.

[slorber]

Thanks @lex111 , investigated this earlier and was not able to understand why the JS seems to hydrate after the images download completes ^^, never heard of this rocket-loader before.

All scripts (including the inline one for the theme) is replaced by <script type="12a2ef273e9b71f07d358b73-text/javascript">
After all assets loaded it puts back to text/javascript and executes the required theme script.

[patryk]

You may disable Rocket Loader for a specific script tag by putting an attribute data-cfasync="false"

Read more:
How can I have Rocket Loader ignore specific JavaScripts?

[slorber]

Thanks @patryk

@lex111 @yangshun do you think we should add data-cfasync="false" to the inline code block handling the dark theme?

I'm not really fan of introducing proprietary CF markup. In the context of a static React SPA, using Rocket Loader might not be recommended due to delaying React hydratation

[yangshun]

Not a fan too. Unless we have many users suffering from this.