Twenty Twenty-One: Dark Mode causes flicker (light to dark) when reloading

[alanjacobmathew]

V: 5.8-beta4-51244. Theme: Twenty TwentyOne. No plugins installed

This is related to the Dark Mode support associated with the Twenty Twenty-One theme.

When the user reloads a page, if dark mode settings is switched ON, there is a slight flicker to the original colour(light mode) before the dark mode content is shown. I tried with two test sites and in both the issue exists.

Steps to reproduce:
1: Appearance -> Customize -> colours and dark mode
2: Enable dark mode support there.
3: Create a new page. add some content and publish it.
4: make sure the floating dark mode toggle is ON
5: Reload the page few times, you'll notice some flicker when reloading.

Issue:
Here the page loads the content initially in light mode and then changes it to dark mode, causing the flicker.

[alanjacobmathew]

Flicker in Dark Mode

[poena]

Hi

Is this not present in earlier WordPress versions?
Which browser and OS?
Does the same happen when you are logged out?

[alanjacobmathew]

Can't say about earlier versions, I only found about it now
OS: Windows 10.
Browser: Brave and Edge (Issue exists)
Yes the same happens when logged out