-
-
Notifications
You must be signed in to change notification settings - Fork 446
Open
Labels
bugSomething isn't workingSomething isn't working
Description
Describe the bug
This is causing the isDarkMode
to reset to the OS setting on every refresh. For some reason it works on production though.
To Reproduce
Use it in local dev with next.js where the OS is set to dark mode.
Expected behavior
I expect my choice to be persisted.
Additional context
No response
smith558, kylegosen, Kjek, damian-balas, howyi and 6 moregregmsanderson and tihonove
Metadata
Metadata
Assignees
Labels
bugSomething isn't workingSomething isn't working
Activity
smith558 commentedon Feb 26, 2024
useDarkMode
currently not working on Linux either (Ubuntu), resets on every page load (no persistence of mode preference). Using Next.js as well. For me it doesn't work in the production either.refeals commentedon Mar 20, 2024
Same thing here. Did a few tests, my guess is that the function in
useIsomorphicLayoutEffect
(that runs on refresh) is checking the wrong stuff (L72) before setting the local storage variable toisDarkOS
(which in this case will always be true).I think this there's a specific case that is not treated: when no value is set on local storage,
useLocalStorage
defaults to atrue
/false
value based on the OS settings, instead ofundefined
. That ripples touseIsomorphicLayoutEffect
and incorrectly checks the values and then sets the OS value.I'm not sure what's the best way to fix this problem, since it seems to be related to other hooks and the way they handle the default values.
juliencrn commentedon Mar 22, 2024
Hi all, thanks for the bug report, feel free to open a PR, I will check it in priority
refeals commentedon Mar 25, 2024
Just created #557
The change in
useLocalStorage
may possibly break other hooks, but I tried to make it consistent. It still does not returnundefined
when the key does not exist, but now it creates the key/value in local storage when the hook is called. That asserts the local storage as the source of truth.And that should fix the
useDarkMode
inconsistency too, so I removed theuseIsomorphicLayoutEffect
since it's now unnecessary - theisDarkMode
variable is always reflecting the correct data in local storage and it does not update on refresh.gregmsanderson commentedon Jun 23, 2024
Ah, been finding this too. The chosen option is lost on a refresh as localStorage is reset. That explains why!
pavitra-infocusp commentedon Nov 11, 2024
I have tripped on this issue too.
Fixed by copying the hook and commenting out
useIsomorphicLayoutEffect
iavorskyi commentedon Dec 4, 2024
Had the same problem. Fixed with this approach too. Looking forward to this fix will be delivered to the main.
fix: incorrect persistence useDarkMode