DEV Community

loading...

Discussion on: Two media queries you should care about

Collapse
seanmclem profile image
Seanmclem

Can you set prefers-color-scheme with js? Or is it exclusively an OS-level thing?

Collapse
selbekk profile image
selbekk Author

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!