Store Dark Mode preferences in Local Storage

[deadcoder0904]

Otherwise I have to constantly switch dark mode on every article I click :)

[franky47]

This would cause a FOUC (flash of unthemed content) when loading the website, which may not be desirable. Dark mode should stick around for local navigation between articles however, and only reset to light mode when reloading the page.

FYI, the upcoming TypeScript release of ChakraUI is supposed to solve those FOUC colorMode issues.

[deadcoder0904]

It wasn't working because I started binge-reading his articles bcz there were so good. And I have a habit of opening in New Tab so it didn't work.

It works while navigating as it should :)

[leerob]

It turns out that dark mode is pretty tricky when using CSS-in-JS. To properly implement in, you likely need to use CSS variables as well.

https://joshwcomeau.com/gatsby/dark-mode/
chakra-ui/chakra-ui#349 (comment)

[deadcoder0904]

Yep already read Josh’s blog post & opened up an issue on Chakra UI a few days ago too. Not sure it’s solvable with Chakra chakra-ui/chakra-ui#908 (comment)

[sarthaktexas]

can we make it so it gets system setting for dark/light mode? i'm having to set it to dark mode every time i open it up.

[deadcoder0904]

@sarthaktexas ohh yeah i think that might work as chakra provides an option now with preferred-color-scheme

[sarthaktexas]

yup! should I make a pull request?

[leerob]

@sarthaktexas I believe that will require updating Chakra to v1 – if you're open to that, I'd love assistance!

[rodmansw]

@leerob Actually I don't think you need to do that, let me see what can I do

[leerob]

@Rodman-Sw My point is that you shouldn't need to do anything custom once you upgrade to Chakra v1. Since I will be doing that eventually, I'd prefer to stick with that rather than something custom. Does that make sense?

https://next.chakra-ui.com

[AkashRajpurohit]

Hey @leerob I recently build a project with Next and Chakra UI with v1.0, today I just pushed the persisting of color mode on my project Github Emojis. If you are planning to upgrade Chakra-UI to 1.0, Do you mind I if try to implement the similar on leerob.io as well?

[leerob]

Yeah, I'd love help migrating to v1! @AkashRajpurohit

[leerob]

Fixed here -> #239