White content flash on dark mode

[Kaedriz]

2024-12-20.15-45-08.mp4

As in the video, bright flash can be seen, even while loading dark mode.

How this could be fixed is up to you, and how do you generate website (SPA, Hybrid or just server rendered). Maybe some cookie, or just color mode detection in plain css which is prefetched. From what I have seen, now, it stores color mode in localStorage, which needs js to access, which in turn does only get interpreted after some milliseconds (but still produces noticeable flash on dark mode).

[KyleDL101]

Myself and @Raiden0456 are looking to fix this sometime soon

[JSGRD22]

This was fixed for a while, but now it's a black flash on light mode instead...

[KyleDL101]

Yes @mr-cheff made dark mode the default mode, so now the page loads dark mode my default first. However, he also deferred the script that loads the theme from local storage, which increases the flash time.

[Kaedriz]

You have the following code in Layout.astro:

:root {
    --zen-paper: #f2f0e3;
    --zen-dark: #202020;
    --zen-muted: rgba(0, 0, 0, 0.05);

    &[data-theme='dark'] {
      --zen-paper: #202020;
      --zen-dark: #f2f0e3;
      --zen-muted: rgba(255, 255, 255, 0.05);
    }
  }

Couldn't this be change to use prefers-color-scheme first, then if detected, apply chosen color mode? I presume most users use either only dark/light modes and rarely switch from their preferred. This would fix it for users without explicit set color mode in Zen website. (ex. you have selected dark mode in Firefox/Zen, so you get dark mode CSS)

Code then can be changed to first try browser color pref, then JS would check localStorage, if there is any, to change mode to other one. This would still inflict flash on users with explicit set color modes, but would fix it for majority, I guess?

Note that this is just a band-aid solution and not a proper replacement for light/dark mode system.

[Yusyuriv]

However, he also deferred the script that loads the theme from local storage, which increases the flash time.

I don't think this is the case. MDN docs say that browsers ignore the defer attribute for inline scripts.

I'm actually curious why the flash happens. I'm currently re-making a website for another open-source project. I also use Astro, and I also use a similar inline script for switching the theme, however, I don't seem to have the same issue with the theme flash. In fact, I forked this repository and deployed it as is, without any changes, and I don't seem to have this issue there either. Could this somehow be related to the hosting?