Put the toggle theme button in the header and serialize the prefered theme value to localStorage with hook

[tonyvugithub]

What would you like to be added:
We need to think of a better way to integrate the theme switching option. Maybe a switch button in the header? Also we need to think of a way to retain the chosen theme so when users revisit the site, the same colors appear to them.
Why would you like this to be added:
This will provide users option to choose their preferred theme and increase their engagement to the app.
Reference for dark theme can be found #1637

[chrispinkney]

Would love to hear about more about this, I don't know anything about localStorage and never even considered how something like this works behind the scenes.

[humphd]

See https://github.com/streamich/react-use/blob/master/docs/useLocalStorage.md

Browsers have a number of built-in "storage" areas:

• cookies: good for sharing small bits of data between the browser and server
• session storage: good for storing things you don't want to go away if you refresh or open another tab, but don't need long term
• local storage: good for storing small bits of text (or JSON serialized to text). You're limited to ~2-5M
• indexeddb: good for working with arbitrary data, including binary data, and lots of it. You can store 10s to 100s of M
• cache storage: good for storing responses from servers

For something like a preference for dark vs. light mode, local storage is perfect. You would use it vs. state via a hook, and set it (i.e., set it in the db) when the user changes it, and read it from the db on startup.

[tonyvugithub]

@chrispinkney : Want to take this on Chris now that we have the header in?

[chrispinkney]

@tonyvugithub I'd like to but I think I have too much on my plate right now, I'll make a reminder to re-evaluate this later in the week but if anyone reading this wants this feel free to jump on it.

[tonyvugithub]

@chrispinkney i can take it

[huyxgit]

I think it's better to detect the system setting of the device first and set the dark/light theme automatically, and still have a switcher for user to change to their desired theme mode

[humphd]

I agree using prefer-color-scheme would be smart here for the initial value, and combine that with a localStorage hook to remember the preference.

https://web.dev/prefers-color-scheme/