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

feat(v2): support prefers-color-scheme & fix dark mode FOUC on refresh #2069

Merged
merged 3 commits into from
Dec 1, 2019

Conversation

endiliey
Copy link
Contributor

@endiliey endiliey commented Nov 30, 2019

Motivation

Fix #1995

Before this PR, notice the FOUC
before

Also have prefer color scheme.

Have you read the Contributing Guidelines on pull requests?

yes

Test Plan

  • Build production locally
  • Serve it locally
  • Go dark mode and refresh
    persistent toggle

You can also try it on netlify :)

https://deploy-preview-2069--docusaurus-2.netlify.com/

cc @lex111 in case you want to give this a try. Seems that this should fit all of our use case

Extra notes

isClient context is needed because we need to do two pass rendering
Why do we need two pass rendering ?
For full reasoning, please check the whole thread starting from this comment #2057 (comment)

I tweaked the CSS such that it looks very perfect now.

@endiliey endiliey added the pr: bug fix This PR fixes a bug in a past release. label Nov 30, 2019
@@ -62,9 +63,6 @@

:global(.react-toggle--disabled) {
cursor: not-allowed;
opacity: 0.5;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed this so it doesnt look transparent on first paint.
Cursor not allowed is needed for a11y, because anyway the toggle can't be clicked until reactjs load

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Nov 30, 2019
@docusaurus-bot
Copy link
Contributor

docusaurus-bot commented Nov 30, 2019

Deploy preview for docusaurus-2 ready!

Built with commit 65f7761

https://deploy-preview-2069--docusaurus-2.netlify.com

@docusaurus-bot
Copy link
Contributor

docusaurus-bot commented Nov 30, 2019

Deploy preview for docusaurus-preview ready!

Built with commit 65f7761

https://deploy-preview-2069--docusaurus-preview.netlify.com

@endiliey endiliey changed the title fix(v2): dark mode should not have flash on refresh fix(v2): support prefers-color-scheme & fix dark mode FOUC on refresh Nov 30, 2019
@endiliey endiliey added the feature This is not a bug or issue with Docusausus, per se. It is a feature request for the future. label Nov 30, 2019
@endiliey endiliey changed the title fix(v2): support prefers-color-scheme & fix dark mode FOUC on refresh feat(v2): support prefers-color-scheme & fix dark mode FOUC on refresh Nov 30, 2019
packages/docusaurus-theme-classic/src/index.js Outdated Show resolved Hide resolved
packages/docusaurus-theme-classic/src/index.js Outdated Show resolved Hide resolved
@endiliey endiliey added pr: new feature This PR adds a new API or behavior. and removed feature This is not a bug or issue with Docusausus, per se. It is a feature request for the future. labels Dec 1, 2019
@endiliey endiliey merged commit 4d5b62a into master Dec 1, 2019
@endiliey endiliey deleted the endi/noflash-2 branch December 1, 2019 13:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA pr: bug fix This PR fixes a bug in a past release. pr: new feature This PR adds a new API or behavior.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Dark theme blinks on refresh
4 participants