fix(dark-mode): avoid localStorage overwrite by system dark mode status

[qwqcode]

Problem Description

While using useDarkMode, I noticed that after refreshing the page, the value saved in localStorage does not take effect (observing that localStorage is always overwritten by the current system's dark mode status), even though I set the initializeWithValue option to true (the documentation states, "If true (default), the hook will initialize by reading localStorage").

Cause of the Issue

The value saved in localStorage does not take effect on the next page load because the value retrieved by const isDarkOS = useMediaQuery() immediately overwrites the result read from useLocalStorage() when the useDarkMode hook initializes (since useIsomorphicLayoutEffect executes immediately). This behavior is unexpected, causing the functionality of saving the dark mode state to localStorage to fail.

Fix

Add const allowDarkOSChange = useIsMounted(). Before the page is mounted, prevent applying the dark mode result from isDarkOS, rather than immediately executing and overwriting the value from localStorage.

Test cases have been added to verify the existence of this issue, and the problem was confirmed. The code modification has passed the tests successfully.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 8084242

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR