DEV Community

loading...

Discussion on: Two media queries you should care about

Collapse
httpjunkie profile image
Eric Bishard

I'm wondering how I can query prefers-color-scheme: dark, so that I can use that boolean true/false for other reasons. For instance:

themeMode: preferredThemeMode() || 'light',

Where preferredThemeMode() uses JS to understand if they prefer 'light' or 'dark' and returns 'light' or 'dark' as a string.

I think they start to explore this idea in the following article:
freecodecamp.org/news/how-to-detec...

Collapse
httpjunkie profile image
Eric Bishard

Yep that works perfectly! I will write a simple article on it.

Collapse
httpjunkie profile image
Eric Bishard

I'm assuming something like this would work in React using the react-media-hook library:

const themeToUse = useMediaPredicate("(prefers-color-scheme: dark)") ? "dark" : "light";