Check the OS color scheme prefers-color-scheme in CSS

There’s a new CSS media query in development called prefers-color-scheme. It’s a variable that will be set to dark if the OS has dark mode enabled, will be set to light if the light mode is enabled, and no-preference if the user has not made a preference.

As of May 2019, support is limited for this (see caniuse.com), but it’s in development and should be implemented in the future.

Personally, I’m super excited about this feature. As you may know, I currently have a dark/light mode toggle button on my blog, and I’d love to have it default to whatever the user prefers instead of having them have to change it when they visit this site.

The check will work something like this:

/** default CSS **/



@media (prefers-color-scheme:dark){

   /** dark mode css **/

}

@media (prefers-color-scheme:light){

   /** light mode **/

}

Here’s a link to the documentation: developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme