The background,

With the release of iOS 13, Dark Mode appears more and more in the public’s view, supporting Dark Mode has become a trend of modern mobile apps and websites, but also caused hot discussion due to the adaptation of wechat some time ago. Dark mode not only dramatically reduces battery consumption, reduces bright light contrast, but also provides better visibility and immersion.

How do I switch to dark mode

  • IOS: Settings — Display and Brightness — Appearance, Select Dark color

  • Android: “System Settings” — “Display” — “Dark Mode”.

Second, the problem of

If the system is set to dark mode, H5 page does not do the corresponding processing, there will be background color conflict, dark text display abnormal, abnormal display of dark ICONS and other display problems.

Therefore, some adaptation is needed for the dark mode.

I tried a few schemes:

Iii. H5 project ADAPTS to dark mode scheme

1. The statement color scheme

color-scheme

There are two ways.

1.1 meta


1.2 CSS

The CSS below can also achieve the effect of the meta declaration above

:root {
    color-scheme: light dark;
}
Copy the code

Note: This declaration does not automatically adapt the page and only affects the browser default styles

More information can be found in the W3C document CSS Color Adjustment Module Level 1.

2. Use the CSS to query information

The PREFERence-color-scheme CSS media feature is used to check whether users set the theme color of the system to bright or dark colors.

  • no-preference

Indicates that the system is not aware of the user’s options in this regard. In the context of Boolean values, the result is false.

  • light

Indicates that the user has informed the system that they have chosen to use an interface with a light-colored theme.

  • dark

Indicates that the user has informed the system that they have chosen to use an interface with a dark theme.

:root { color-scheme: light dark; background: white; color: black; } @media (prefers-color-scheme: dark) { :root { background: black; color: white; }} // If there are many colors, you are advised to use CSS variables to manage color valuesCopy the code

3. Picture adaptation

Using the Picture + Source TAB, set the url of the picture in different modes.

The HTML element provides image versions for different display/device scenarios by including zero or moreelements and a
element. The browser selects the childelement that best matches, and if there is none, selects the URL in the SRC attribute of the
element. The selected image is then rendered in the space occupied by the
element.

<picture> <! <source srcset="dark.jpg" media="(color: dark)" /> <! <img SRC ="light.jpg"/> </picture>Copy the code

4. Determine the current mode in JavaScript & listen for mode changes

4.1 matchMedia

Window’s matchMedia() method returns a new MediaQueryList object representing the parsed result of the specified media query (en-US) string. The returned MediaQueryList can be used to determine whether a Document matches a media query, or to monitor a Document to determine whether it matches or stops matching the media query.

4.2 addListener ()

The addListener() method of the MediaQueryList interface adds a listener to MediaQueryListener that runs a custom callback function in response to changes in the state of the media query.

JavaScript listening judgment

const mediaQuery = window.matchMedia('(prefers-color-scheme: Dark)') function darkModeHandler() {if (mediaQuery.matches) {console.log(' now in dark mode ')} else {console.log(' now in light mode ')} } // Determine the current mode darkModeHandler() // listen for mode changes mediaQuery.addListener(darkModeHandler)Copy the code

Embed in THE H5 page of app

If it is an H5 page embedded in the APP, the corresponding WebView should provide support, otherwise the correct results may not be obtained by using media query.