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 Light theme flash during page load #8004

Merged
merged 2 commits into from
Oct 14, 2022
Merged

Conversation

flexdinesh
Copy link
Contributor

@flexdinesh flexdinesh commented Oct 14, 2022

Currently when the user has chosen dark mode, it's saved to localstorage and the we check localstorage and set the dark theme in the website but we do this after hydration. It was causing light theme flash every time the page was refreshed. This also caused light theme flash when switching between md and tsx docs.

The fix: theme should be set in html before hydration and color css variables should inherit the theme before the first paint.

Fixes #8003

@flexdinesh flexdinesh requested a review from a team October 14, 2022 05:42
@vercel
Copy link

vercel bot commented Oct 14, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
keystone-next-docs ✅ Ready (Inspect) Visit Preview Oct 14, 2022 at 5:59AM (UTC)

@changeset-bot

This comment was marked as resolved.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 14, 2022

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit dead1d5:

Sandbox Source
@keystone-6/sandbox Configuration

@vercel vercel bot temporarily deployed to Preview October 14, 2022 05:59 Inactive
@flexdinesh flexdinesh merged commit 709d1a8 into main Oct 14, 2022
@flexdinesh flexdinesh deleted the dinesh/fix-theme-flash branch October 14, 2022 06:05
@dcousens dcousens changed the title FIX: Light theme flash during page load Fix Light theme flash during page load Oct 14, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Light mode flashes while browsing documentation in dark mode
2 participants