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:
prefers-color-scheme: dark
themeMode: preferredThemeMode() || 'light',
Where preferredThemeMode() uses JS to understand if they prefer 'light' or 'dark' and returns 'light' or 'dark' as a string.
preferredThemeMode()
'light'
'dark'
I think they start to explore this idea in the following article: freecodecamp.org/news/how-to-detec...
Yep that works perfectly! I will write a simple article on it.
I'm assuming something like this would work in React using the react-media-hook library:
react-media-hook
const themeToUse = useMediaPredicate("(prefers-color-scheme: dark)") ? "dark" : "light";
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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...
Yep that works perfectly! I will write a simple article on it.
I'm assuming something like this would work in React using the
react-media-hooklibrary:const themeToUse = useMediaPredicate("(prefers-color-scheme: dark)") ? "dark" : "light";