Fix dark mode flicker docs #4250
Closed
Conversation
This file contains hidden or 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
|
|
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
dosubot
bot
added
the
size:M
github-actions
bot
added
Type: Documentation
|
View your CI Pipeline Execution ↗ for commit 07a5a8f.
☁️ Nx Cloud last updated this comment at |
krisantrobus
commented
Feb 19, 2025
Comment on lines
+18
to
+20
| React.useEffect(() => { | ||
| setIsMacOS(typeof window !== "undefined" && navigator && navigator?.platform.toUpperCase().includes("MAC")); | ||
| }, []); |
There was a problem hiding this comment.
An error came up after removing the delayed rendering as navigator is only available running client side.
|
Size Change: 0 B Total Size: 1.12 MB ℹ️ View Unchanged
|
krisantrobus
commented
Feb 19, 2025
| @@ -68,7 +73,7 @@ const SiteHeaderSearch: React.FC = () => { | |||
| Search | |||
| </Text> | |||
| </Box> | |||
| {breakpointIndex === 0 ? null : ( | |||
| {breakpointIndex === 0 || isMacOS === undefined ? null : ( | |||
There was a problem hiding this comment.
Do not render the keyboard shortcuts in the search bar until we know what OS they are using
krisantrobus
commented
Feb 19, 2025
| @@ -5,6 +5,16 @@ import { SimpleStorage } from "../utils/SimpleStorage"; | |||
|
|
|||
| export type UseDarkModeReturn = [ValidThemeName, () => void, boolean]; | |||
|
|
|||
| const setCookie = (name: string, value: any, days: number): void => { | |||
There was a problem hiding this comment.
I cannot use the NextJS cookies tool are this does not run client side and I couldn't get it to work except this way or we add a new cookie dependency
dosubot
bot
added
size:L
krisantrobus
commented
Feb 19, 2025
Comment on lines
55
to
59
| React.useEffect(() => { | ||
| const localTheme = SimpleStorage.get("theme") as ValidThemeName; | ||
| const cookieTheme = getCookie(themeCookieKey) as ValidThemeName; | ||
|
|
||
| if (window.matchMedia?.("(prefers-color-scheme: dark)").matches && !localTheme) { | ||
| if (window.matchMedia?.("(prefers-color-scheme: dark)").matches && !cookieTheme) { | ||
| setMode(ValidThemes.DARK); |
There was a problem hiding this comment.
As we are setting the default value from the cookie we don't need local storage anymore. We also don't want to use teh document cookie in this hook as we will still get the flickering issue. The reason this works now is that itis inside a useEffect hook and in functions so we know it would already be rendered in the client.
|
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 07a5a8f:
|
krisantrobus
added
the
🕵🏻♀️ Run website visual regression
Paste
|
||||||||||||||||||||||||||||
| Project |
Paste
|
| Branch Review |
fix-dark-mode-flicker-docs
|
| Run status |
|
| Run duration | 06m 42s |
| Commit |
|
| Committer | krisantrobus |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
0
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
125
|
| View all changes introduced in this branch ↗︎ | |
krisantrobus
removed
the
🕵🏻♀️ Run website visual regression
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.
The current problem was that we were using a default theme in the useDarkMode hook that was the light mode. Then once the component was rendered it ran the use effect hook to pull the value from local storage and then updated the theme.
This change captures the cookies at the request level to the server and passes the theme value we store in the cookies to the page to use.
Still see the flicker but I think this is due to SSG (static generated pages at build time). I'm continuing to look at it.