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.

fixes #512

[changeset-bot]

🦋 Changeset detected

Latest commit: bd1cd0c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
usehooks-ts	Patch
www	Patch

Not sure what this means? Click here to learn what changesets are.

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

[adamwdennis]

LGTM

[adamwdennis]

@qwqcode this needs a changeset

[JamesWatling]

Yes this helps so much!

[qwqcode]

@qwqcode this needs a changeset

Got it, I added it.