prefers-color-scheme

[cylott]

The prefers-color-scheme CSS media query is used to detect if the user has requested the system use a light or dark color theme.

Does Modernizr have a method to detect whether the browser is "Dark Mode" capable? I'm not talking about whether or not dark mode is "on," but whether or not the device/os supports some sort of dark mode. I'd imagine this would be a laundry list of User Agents.

[patrickkettner]

@cylott it does not. Browsers have built in support for checking if a media query is supported, matchMedia

specifically, you would want

matchMedia('(prefers-color-scheme: dark)')

you can easily make that see if it is "on" with

matchMedia('(prefers-color-scheme: dark)').matches

or more bulletproof

'matchMedia' in window && matchMedia('(prefers-color-scheme: dark)').matches

Modernizr has a helper for media query testing, in mq. Like a lot of things here, its built to support browsers you shouldn't have to think about anymore, so I would not recommend using it unless you have a lot of legacy browsers. It is just a abstraction on top of matchMedia and its ilk

Modernizr.addTest('darkmode', Modernizr.mq("prefers-color-scheme: dark"))