feat(theme): Allow resetting colorMode to System/OS value #10987
+392
−144
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ [V2]
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Size Change: +46.9 kB (+0.42%) Total Size: 11.2 MB
ℹ️ View Unchanged
|
⚡️ Lighthouse report for the deploy preview of this PR
|
3 tasks
|
Size Change: +60.9 kB (+0.52%) Total Size: 11.7 MB
ℹ️ View Unchanged
|
1 task
2 tasks
…nto slorber/theme-color-scheme-os
7 tasks
|
Super happy to see that 🥳 thank you! Very well done also (inline scripts to avoid the fouc, etc. 💯) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Motivation
Introduce a 3rd value in the color mode toggle to reset to System/OS color mode value
Fix #8074
To handle FOUC in the toggle button before React hydration, we introduce a
data-theme-choiceattribute. Users can also rely on this to implement their own toggle button that doesn't produce FOUC. Relying onuseColorMode().colorModeChoiceto display the right icon is not ideal due to how React hydration works (see also #7986)Note about data attributes:
data-themeis always set to'light' | 'dark': it's the "effective" theme being applied to the UIdata-theme-choiceis always set to'light' | 'dark' | 'system': it's the explicit theme choice that we consider the user has madeIn practice, it's possible to have
data-theme-choice: 'auto'anddata-theme: 'light'for example (most likely happens when the system theme is 'light')This also refactors and simplifies a few things and fixes a few bugs:
useColorMode()appropriately, including its tradeoffs (fix Values derived from useColorMode() can be stale when rendering in prod mode #7986): https://deploy-preview-10987--docusaurus-2.netlify.app/docs/api/themes/configuration/#use-color-modeTest Plan
Preview 😅
Test links
https://deploy-preview-10987--docusaurus-2.netlify.app/
Docs: https://deploy-preview-10987--docusaurus-2.netlify.app/docs/api/themes/configuration/#use-color-mode
Related issues/PRs
Supersede:
Fixes the printing edge case but in a different way (#6490)
Fix #7667 and a11y state announcement issues
Document tradeoffs of
useColorModerelated to React hydration/FOUC: see #7986