This document is to experiment with dark mode (#551).

The author of this document has indicated to UAs it is compatible with dark mode as well as light mode (with a preference for dark mode) using <meta name="color-scheme" content="dark light">, allowing the UA to render this document with an appropriate color scheme. The <map-layer media=(prefers-color-scheme: dark)> is used to identify the layer to use either mode. While a linked CSS stylesheet can be selected using the <map-link media="(prefers-color-scheme: dark)" declaration, this technique has not yet been implemented for stylesheet modules for pmtiles archives. Open an issue if you would like to see this implemented.

Set the preference for dark mode in your browser/OS settings or dev tools!

References

• Use case: Customize the color scheme (light/dark or high contrast)
• HTML <meta name="color-scheme">
  • https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name#:~:text=color-scheme
• CSS color-scheme property
  • https://drafts.csswg.org/css-color-adjust/#color-scheme-prop
  • https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
• CSS prefers-color-scheme media feature
  • https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme
  • https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
• Articles
  • https://web.dev/color-scheme/
  • https://web.dev/prefers-color-scheme/