WordPress.org

Make WordPress Core

Opened 3 months ago

Last modified 3 months ago

#53532 new defect (bug)

Twenty Twenty-One: On 5.8-beta4-51244 Dark Mode causing colour to flicker (light-mode to darkmode) when reloading

Reported by: alanjacobmathew Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: needs-patch
Focuses: Cc:

Description

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.

Attachments (1)

Flicker on reload.gif (304.6 KB) - added by alanjacobmathew 3 months ago.
Flicker in Dark Mode

Download all attachments as: .zip

Change History (4)

@alanjacobmathew
3 months ago

Flicker in Dark Mode

#1 @poena
3 months ago

Hi

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

#2 @alanjacobmathew
3 months ago

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

#3 @SergeyBiryukov
3 months ago

  • Summary changed from On 5.8-beta4-51244 Dark Mode (Twenty TwentyOne theme) causing colour to flicker(light-mode to darkmode) when reloading to Twenty Twenty-One: On 5.8-beta4-51244 Dark Mode causing colour to flicker (light-mode to darkmode) when reloading
Note: See TracTickets for help on using tickets.