Dark mode causes flash of color change

[Nikschavan]

Bug Description

The preference of dark mode is stored in localStorage, this gets executed after the dom is ready and after which the required attribute is added to the body and the CSS kicks in. On slower connections this causes a flash of colors where it first loads with different style and then switches to the preferred style.

This can be emulated on local with fast or slow 3g network throttling -

https://user-images.githubusercontent.com/2931091/187685189-f8182a2c-5f1a-4bba-b763-3c00000b9495.mp4

Expected Behaviour

Page loads with preferred style instead of changing the style after load,

Steps to reproduce

1. In the network inspector set the throttling to slow/fast 3G
2. Set the default of the dark mode to light from theme
3. In the frontend change the preference to be dark mode
4. See the color scheme change,

Screenshots

Additional context

• WordPress version:
• Plugin version:
• Gutenberg plugin version (if applicable):
• PHP version:
• OS:
• Browser: [e.g. chrome, safari]
• Device: [e.g. iPhone6]

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

[PatelUtkarsh]

Thanks @Nikschavan, I've raised #445 to fix this issue. cc: @igruszkauy