This content originally appeared on Go Make Things and was authored by Go Make Things
Back in July, I wrote about how I rolled out an improved dark mode for my website.
I discussed how the prefers-color-scheme media query can be used to support a user’s choices in their operating system. I also shared some tips for making sure your color choices have proper contrast using WebAIM’s color contrast tool.
/**
* If dark mode is enabled, do this instead
*/
@media (prefers-color-scheme: dark) {
/* ... */
}Last week, inclusive design advocate (and personal friend) Eric Bailey shared an article he wrote about a variety of OS-level choices a user can make that are (or soon will be) detectable with media queries.
Among my favorites are…
- Reducing motion and animations (which I’ve written about before here)
- Reducing data usage, which will be really useful for serving smaller assets on low bandwidth or low data devices
- Contrast mode
- Transparency, to disable or reduce transparent graphics
Eric’s whole article is a good introduction to thoughtful, user-focused design. Give it a read!
⏰? Early Bird Sale! A new session of the Vanilla JS Academy starts on October 4. This week, get 35% off the program. Click here to join.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2021-09-14T14:30:00+00:00) Supporting user preferences on your sites and apps. Retrieved from https://www.scien.cx/2021/09/14/supporting-user-preferences-on-your-sites-and-apps/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.