Add dark mode toggle.

[leerob]

No description provided.

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/leerob/leerob/j1pjvokhd
✅ Preview: https://leerob-git-use-dark-mode-toggle.leerob1.now.sh

[quantizor]

Looked into this and it appears to be an issue with differing content during rehydration. useDarkMode(false)'s returned ref has a value of false on the server and true on the client.

This code fixed it:

const DarkMode = ({children}) => {
    const darkMode = useDarkMode(false);
    const [theme, setTheme] = useState(lightTheme);

    useEffect(() => {
        if (darkMode.value) setTheme(darkTheme);
    }, [darkMode, darkMode.value]);

    return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};

Note that React will automatically fix up differing element markup, but not different HTML attribute markup.

[leerob]

Huh, interesting. Thanks for looking into this @probablyup!

cc: @brianlovin

[brianlovin]

That did fix it, but you want one small tweak:

React.useEffect(() => {
    setTheme(darkMode.value ? darkTheme : lightTheme);
  }, [darkMode, darkMode.value]);

Previously it would respond to changes from light -> dark, but not the reverse. This fixes it so that if your user is looking at your site and switches to light mode (manually or automatically) the site will use the correct theme.

[brianlovin]

Unfortunately, this still causes a flash from light -> dark if your OS is set to dark mode. I think this still requires hiding the content with a visibility:hidden wrapping div to prevent a flash.

[quantizor]

Yeah. I think for this use case css variables and the dark mode media query is probably the better solution since it takes effect prior to React mount

…

On Mon, Jan 6, 2020 at 1:04 AM Brian Lovin ***@***.***> wrote: Unfortunately, this still causes a flash from light -> dark if your OS is set to dark mode. I think this *still* requires hiding the content with a visibility:hidden wrapping div to prevent a flash. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#135?email_source=notifications&email_token=AAELFVRSX7SK544PAS7OBA3Q4LCWVA5CNFSM4KBMR5RKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIEQJEY#issuecomment-571016339>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAELFVVW4IZJO22IC6ATNC3Q4LCWVANCNFSM4KBMR5RA> .

[leerob]

While redesigning my site to use Chakra UI (which has use-dark-mode under the hood), I was still hitting the same issue.

Ultimately decided to just default to light mode always, but still have a toggle for dark if they want it. Good enough solution for now, since I don't really want to with CSS variables or global styles.

#159