Lighthouse: new audit: check that page supports dark mode

[ithinkihaveacat]

Feature request summary

Test whether a site supports "dark mode".

What is the motivation or use case for changing this?

The upcoming versions of Safari and Chrome support a "dark mode", via prefers-color-scheme CSS media feature. System-level dark mode is coming to Android in Q, and iOS is also expected to get dark mode in the next major release. PWAs will not feel integrated into the system unless they support dark mode.

[ithinkihaveacat]

/cc @tomayac

[brendankenny]

@ithinkihaveacat can you give an idea of what you're thinking for how to test this and what threshold we should set for "supports"?

Is it enough to look for anything responding to a media query or are there already best practices for this?

[benschwarz]

This could be assessed from an accessibility standpoint, although I haven't seen anyone doing that yet. If the goal is to just know if there's a media query present then I'd say that this is better handled in a custom audit.

[ithinkihaveacat]

Testing for the presence of that media query might be good enough, although I believe there are potentially accessibility issues if support is inadequate (e.g. forgetting to invert some components or parts of the site).

I think this test should be part of at least the PWA scoring though, because apps will not feel well-integrated into the system unless they support this.

[paulirish]

Thanks for bringing it up, but I think it's much too early for Lighthouse to evaluate this.

1. chrome's support of prefers-color-scheme hasn't shipped yet.
2. chrome hasn't figured out the intended policy with enable-android-web-contents-dark-mode and if all pages will be affected.
3. <meta name="supported-color-schemes"> isn't shipped yet and seems very central to the developer story here.

Let's wait for Chrome to have these components in stable and very clear guidance published before we drop people's Lighthouse scores due to this.

[mathiasbynens]

Tracking bug for <meta name="color-scheme" content="dark light">: https://bugs.chromium.org/p/chromium/issues/detail?id=925935

[connorjclark]

re: color-scheme meta tag:

https://www.chromestatus.com/feature/5330651267989504 landed in 81

I found this section to be most illuminating: https://web.dev/color-scheme/#interplay-with-prefers-color-scheme

We have enough to do the most basic check today. I think we don't want to venture further than checking for the meta element. @tomayac wdyt?

[tomayac]

We have enough to do the most basic check today. I think we don't want to venture further than checking for the meta element. @tomayac wdyt?

We should probably primarily check for the meta tag, but then also not fail the test if the color-scheme CSS property is present (indicating the developer thought about dark mode).