Changes to system preference made when site is not open are not honoured

[dantman]

The useDarkMode hook can handle changes to system dark/light mode preference if the website is open during the preference change. However if the system's dark/light mode preference is changed when the user is not visiting the website it will remain in the previous state instead of updating. This happens even if the original preference came from the system setting and the user never interacted with a toggle suggesting a preference other than what their system declares.

How to test

• Set your system to light mode
• Open up a page with useDarkMode (after first clearing localStorage to ensure there is no prior darkMode setting)
• Close the page
• Change your system to dark mode
• Reopen the page
• The page will remain in light mode even though your system is in dark mode

Practical

This creates two problematic scenarios.

1. A user who visits a bunch of websites that use use-dark-mode, then months later decides they want a system wide dark mode and enables it, then visits a bunch of websites that use use-dark-mode. The new sites they visit will be in dark mode while the sites they visited months ago will be in light mode.

2. Say a user uses f.lux's "Dark theme at sunset" setting, or iOS' "Light Until Sunset", or Android's "Dark theme: Schedule" setting. If they visit a website and it becomes sunset while they are visiting the site, it will switch to dark mode as the system switches. However if the user visits a website during the day, finishes, then next day visits the site at night the site will use the light theme even though it's night, the system is in dark mode, and the site would otherwise have been in dark mode.

[ConcurrentHashMap]

@dantman @donavon Any updates on this? I noticed the same behaviour today. Did you find a workaround? Why does it respect the change in dark mode during a stay on the page, but not when initial loading the page?

[dantman]

No, update ou workaround. I just don't use use-dark-mode where this is an issue.

It updates when the page is open because it has an event listener that updates the saved state when it changes.

However when the page isn't open that event listener isn't listening for the change. So the system value copied into local storage is never updated.

[ConcurrentHashMap]

I found a workaround that fixed it for me, using an useEffect hook and initializing useDarkMode without persistent storage.

const darkMode = useDarkMode(false, {
    storageKey: null
});

useEffect(() => {
    const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)");
    if(darkThemeMq.matches) {
        darkMode.enable();
    } else {
        darkMode.disable();
    }
});

[djD-REK]

Great solution! I think that should be the default behavior ...

El mié., 2 de diciembre de 2020 7:38 a. m., Nils Buschhüter < [email protected]> escribió:

I found a workaround that fixed it for me, using an useEffect hook and initializing useDarkMode without persistent storage.

const darkMode = useDarkMode(false, { storageKey: null });

useEffect(() => { const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)"); if(darkThemeMq.matches) { darkMode.enable(); } else { darkMode.disable(); } });

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/donavon/use-dark-mode/issues/52#issuecomment-737204496, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMV42QXWIBXPHU6GLLNK3VTSSYYN7ANCNFSM4NMWWFJA .