Skip to content

fix: use layout effect for theme sync#2961

Merged
SoonIter merged 2 commits intoweb-infra-dev:mainfrom
SoonIter:SoonIter/fix-theme-sync
Jan 5, 2026
Merged

fix: use layout effect for theme sync#2961
SoonIter merged 2 commits intoweb-infra-dev:mainfrom
SoonIter:SoonIter/fix-theme-sync

Conversation

@SoonIter
Copy link
Copy Markdown
Member

@SoonIter SoonIter commented Jan 5, 2026

Summary

  • Simplify useThemeState hook by using useEffect to sync theme changes to DOM
  • Avoid dark mode flash by properly handling theme resolution during SSR hydration
  • Update various patch dependencies

Changes

  • Renamed useAppearance.ts to useThemeState.ts with cleaner implementation
  • Use useEffect to sync resolved theme to DOM instead of manual sync
  • Properly resolve theme from window.RSPRESS_THEME for SSR hydration

Test plan

  • Verify dark mode toggle works correctly
  • Verify no dark mode flash on page load
  • Verify cross-tab theme sync works
  • Run e2e tests

🤖 Generated with Claude Code

Copilot AI review requested due to automatic review settings January 5, 2026 08:43
@netlify
Copy link
Copy Markdown

netlify bot commented Jan 5, 2026

Deploy Preview for rspress-v2 ready!

Name Link
🔨 Latest commit ab631e6
🔍 Latest deploy log https://app.netlify.com/projects/rspress-v2/deploys/695b887866b110000835f310
😎 Deploy Preview https://deploy-preview-2961--rspress-v2.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 project configuration.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR simplifies the theme state management by changing from useLayoutEffect to useEffect for syncing theme changes to the DOM. The stated goals are to avoid dark mode flash and properly handle SSR hydration by utilizing window.RSPRESS_THEME.

Key Changes

  • Changed theme synchronization from useLayoutEffect to useEffect in the theme state hook
  • File appears to have been renamed from useAppearance.ts to useThemeState.ts (mentioned in description)

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Timeless0911
Timeless0911 previously approved these changes Jan 5, 2026
@SoonIter SoonIter enabled auto-merge (squash) January 5, 2026 09:47
@SoonIter SoonIter changed the title fix: use effect for theme sync fix: use layout effect for theme sync Jan 5, 2026
@SoonIter SoonIter merged commit 170fef8 into web-infra-dev:main Jan 5, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants