Store light/dark mode state in localStorage

[vimwitch]

Maybe we should develop some open source React Context objects that can optionally be consumed by components? These contexts can be used to power some of the ui components.

Example:

UIContext

• access dark/light mode state
• switch dark/light mode
• return a css class to be chained onto color dependent elements

StorageContext

• store and read arbitrary strings in localStorage
• each component can persist/manage its own state
• wrapper functions around localStorage

UIContext would manage dark/light mode state using memory and StorageContext. It's probably worth wrapping StorageContext around localStorage to namespace/avoid key collisions

[tkmct]

maybe we can consider using this?

[vimwitch]

This issue is actually more or less done. I'm not a big fan of using packages for functionality like this. I think it's simple enough that the cost of learning/maintaining an external package isn't worth the lack of customizability. The current context isn't documented but it can be read here. There are observables for darkmode and viewport size. Darkmode is also stored in localstorage and as a cookie so SSR can generate the right color html/css.

I do want to look into global css classes. That would be much more clean than adding the modeCssClass on components that need dark mode.