prospects

With a dark theme, users can choose to have a dark system-wide look instead of a light one. In dark mode, the system uses a dark palette for all Windows, views, menus, and controls.

Darkmode is now available in Google’s Gmail and Chrome browsers, chat tools Slack, Telegram, Edge browser, and Office Mobile apps. Youtube introduced a new interface for the Web, mobile and tablet this year.

With system-level support, adaptations to other mainstream applications have been rolled out.

advantage

  • Significantly reduced power consumption (depending on the device’s screen technology).
  • Improve visibility for amblyopia and light sensitive users.
  • Make it easier for everyone to use devices in low-light environments.

System compatibility

  • Darkmode was introduced in macOS 10.14
  • Darkmode was added to ios13 released in March 2019
  • Dark themed backgrounds are available in Android 10 (API level 29) and later
  • Window10 2018.10.10

It can be seen that the system adaptation is very considerable.

How does h5 fit

CSS adaptation

Use @media(dark-color scheme: dark) to adapt

The Demo:

body {
  background: #f2f2f2;
  color: # 333;
}
@media (prefers-color-scheme: dark) {
  body {
    background: # 222;
    color: #eee; }}Copy the code

Documents:

MDN prefers-color-scheme

Compatibility:

The browser compatibility shown on Caniuse is impressive. As a front-end developer, going with the flow is inevitable.

Note: asis-color-scheme is a level5 draft of the W3C specification and needs some down-compatibility processing for different browsers in a production environment.

Javascript adapter

The Demo:

if (
  window.matchMedia &&
  window.matchMedia("(prefers-color-scheme: dark)").matches
) {
  // dark mode do something
}
Copy the code

Documents:

Window.matchMedia() – Web APIs | MDN

Compatibility:

Note: If the native webView container only needs to support darkmode runtime, compatibility processing is not considered.

extension

More media queries fit!

According to Specification [Drafts.csswg.org]W3C draft, media queries and THE JS matchMedia Api can not only be used to adapt darkmode. You can also use the following key to fit more scenarios:

  • May I have his inverted colors
  • Preference-reduced – Motion: Reduced animation
  • An ORGANIC garden is preference-reduced-transparency
  • PREFERence-contrast
  • Formed-colors: specifies a color

All of these properties are compatible with media queries, which you can read up on at W3C.

reference

  • Dark Mode – Visual Design – macOS – Human Interface Guidelines – Apple Developer
  • The dark theme background | Android Developers