Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix white flash when using dark mode #392

Merged
merged 1 commit into from
Nov 18, 2022

Conversation

Sohn123
Copy link
Contributor

@Sohn123 Sohn123 commented Oct 15, 2022

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:


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

@netlify
Copy link

netlify bot commented Oct 15, 2022

Deploy Preview for anatole-demo ready!

Name Link
🔨 Latest commit 25fdc9e
🔍 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...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@sonarcloud
Copy link

sonarcloud bot commented Oct 15, 2022

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

@Sohn123 Sohn123 changed the title fix: move theme class to root node to prevent white flash Fix white flash when using dark mode Oct 15, 2022
@lxndrblz lxndrblz self-assigned this Nov 18, 2022
@lxndrblz lxndrblz added the enhancement New feature or request label Nov 18, 2022
@lxndrblz lxndrblz merged commit c36e1d8 into lxndrblz:master Nov 18, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants