Use prefers-color-scheme preference over localStorage color mode #787
Description
Describe the bug
When toggling between light/dark mode on a supoprted device (in this case iOS, or MacOS via Firefox), Theme-UI's color scheme does not update. Updating the app to reflect the user's color mode requires the localstorage to be deleted.
but may I add, setting up dark/light mode in it's current state has been an absolute breeze - thank you!
To Reproduce
Steps to reproduce the behavior:
- Follow steps outlined in https://theme-ui.com/color-modes/
- Clear local storage and refresh
- App should render with your system preferences
- Try toggling between light/dark mode in your system preferences and watch the behaviour of the app.
Expected behavior
As I've enabled useColorSchemeMediaQuery, I would expect the color modes to behave as a media query (in other words, on user-agent change - much like a breakpoint).
Screenshots
An example in Theme-UI: (using useColorSchemeMediaQuery)
Examples of 'expected behaviour' in non-Theme-UI applications
Additional context
Related issues: #367