Use media query value when useColorSchemeMediaQuery is set to true

[julianbenegas]

Currently, even if useColorSchemeMediaQuery: true, the color mode stored in localStorage wins. Also, the color mode from the media query gets stored to localStorage.

Update (4814af8): I made the media query color mode get stored in localStorage again, to make the initial flash prevention script still work.

Fixes #787

Absolutely loving theme-ui btw.

[julianbenegas]

I also added media query listeners, which is a minor detail, but nice.

I used the docs to test it:

Before — After

[julianbenegas]

Thinking about an issue with this. The pr as is gives sense to the useColorSchemeMediaQuery key, but also makes manual toggles not work alongside it. Even if localStorage says one thing, the media query will always persist.

What if the user has useColorSchemeMediaQuery: true, but only wants it as a default, and also add a color mode toggle.

Example use case: The end user having three options: light, dark and auto. Very popular pattern.

• If there's a value in localStorage, always use that one.
• If there's no value in localStorage and useColorSchemeMediaQuery: true, use color scheme media query—without saving it to localStorage!
• The initializeColorMode script could be tweaked to also check for color scheme media queries so that flash is prevented either way.

To enable "auto", the programmer just has to clear localStorage.

Let me know what you guys think and I'll update.

[vercel]

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

🔍 Inspect: https://vercel.com/systemui/theme-ui/gqe7nm3c3
✅ Preview: https://theme-ui-git-fix-color-scheme-media-query.systemui.vercel.app

[lachlanjc]

Personally, I'd like to make this a separate option from the existing option. I think there are different usecases for these functionalities, & while personally I'd use it on most sites, I can definitely think of applications where you'd want other color modes but not use the media query live. I'm not quite sure how to name these differently:

• We could rename the existing option useInitialColorSchemeMediaQuery, with this staying as useColorSchemeMediaQuery, but that'd be a breaking change for existing users unless they change their theme config upon upgrade
• We could name this useLiveColorSchemeMediaQuery, keeping the existing name for the existing behavior but encouraging using useInitialColorSchemeMediaQuery in the future & deprecate it
• Definitely plenty of other names we could use instead, but I think one of these two structural paths make sense

[hasparus]

We could rename the existing option useInitialColorSchemeMediaQuery, with this staying as useColorSchemeMediaQuery, but that'd be a breaking change for existing users unless they change their theme config upon upgrade
We could name this useLiveColorSchemeMediaQuery, keeping the existing name for the existing behavior but encouraging using useInitialColorSchemeMediaQuery in the future & deprecate it
Definitely plenty of other names we could use instead, but I think one of these two structural paths make sense

@lachlanjc (insert state machines meme) What do you think about this?

useColorSchemeMediaQuery: 'live' | 'initial' | true (same as initial for backwards compatibility) | false

I think I'd prefer to have a special color mode "system" which would pick "light" and "dark" from theme.colors, but I'm not strongly opinionated here.

[lachlanjc]

Brilliant. Yeah, let’s do the string solution, that’s way better than conflicting Booleans!

[lachlanjc]

This is awesome work. Before we merge, let's implement this as a separate option from the existing functionality, using @hasparus's suggestion for syntax:

useColorSchemeMediaQuery: 'live' | 'initial' | true (same as initial for backwards compatibility) | false

[albertusdev]

hello there!
great and exciting work on this PR since I'm looking to implement a manual system/light/dark theme toggler in my Gatsby site.
Is there any news/update on this PR progress that you can share with us?
Thanks!

@hasparus @lachlanjc

[lachlanjc]

@albertusdev We’d still love for this feature to be implemented, but as this PR is stale, if you’d like to update it with the API I mentioned, that would be much-appreciated!

[hasparus]

🚀 PR was released in v0.12.0 🚀