CSS is a powerful language. The "media query" feature gives you access to the user's circumstances, device capabilities and preferences.
That last...
For further actions, you may consider blocking this person and/or reporting abuse
I did some googling and didn't find a a great answer for this - how do I, as a user, express this preference? The MDN spec says: "The method by which the user expresses their preference can vary. It might be a system-wide setting exposed by the Operating System, or a setting controlled by the User Agent."
It depends on the setting and your OS of choice I guess. Light / dark mode preference is in the general section of osx system preferences, and the prefer-reduced-motion setting can be set in your phoneβs accessibility settings (as least on ios).
That makes sense! Looks like Windows 10 has this as well. Very cool.
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";Created an article based on how to do this in a React application with a simple Hook! Hope you all like it. Thanks for this article, it inspired mine...
dev.to/httpjunkie/preferred-color-...
Very cool!
Amazing! I had no idea these even existed!
Cheers
Can you set prefers-color-scheme with js? Or is it exclusively an OS-level thing?
It's an OS level setting - you wouldn't want a website to be able to change how your entire computer looks, right?
You could still use this setting as a part of your theme logic, however. You can access it via the
window.matchMedia('(prefers-color-scheme: dark)')method (see the MDN docs), and use it to change your theme settings as appropriate.Note that this OS wide setting might change automatically, depending on the current light environment or time of day as well - so make sure to respond to changes in this value as well!
Thanks for the wonderful writeup. I really love the CSS variable solution! It really makes it so much easier to do things.
Sweet! You could use that with this!
(Full disclosure I wrote this, but it's topical)
π€― More to Media Queries than meets the eye ποΈ (in JavaScript example with Vue.js)
Adam Crockett γ» Sep 27 γ» 2 min read
It's better to give the user a choice what color theme to implement
Anyway it's very informative! Thanks a lot!)
Truth is, they might already have given their preference with the OS level light or dark mode preference - so I think using that as the default makes sense.
In addition, once youβve added support for this, creating a theme switcher is trivial. π