Fix white flash when using dark mode

Sohn123 commented 1 year ago

Description

There is a white flash when using the theme in dark mode, when you switch between pages. This is, because the theme class gets applied on the event DOMContentLoaded. This is after the first contentful paint. I moved the theme class from the body to the root node, so we can apply the styling before the first contentful paint.

Issue Number:

333

Checklist

Yes, I included all necessary artefacts, including:

[ ] Tests
[ ] Documentation
[ ] Implementation (Code and Ressources)
[ ] Example

Testing Checklist

Yes, I ensured that all of the following scenarios were tested:

[ ] Desktop Light Mode (Default)
[ ] Desktop Dark Mode
[ ] Desktop Light RTL Mode
[ ] Desktop Dark RTL Mode
[ ] Mobile Light Mode
[ ] Mobile Dark Mode
[ ] Mobile Light RTL Mode
[ ] Mobile Dark RTL Mode

Notify the following users

@lxndrblz

netlify[bot] commented 1 year ago

Deploy Preview for anatole-demo ready!

Name	Link
Latest commit	25fdc9ed243e39cb119ee3d6fc7bc239796c3840
Latest deploy log	https://app.netlify.com/sites/anatole-demo/deploys/634b28392d6c89000889575a
Deploy Preview	https://deploy-preview-392--anatole-demo.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.