Detailed explanation of dark mode scheme summary of HTML5 project adaptation system

Time:2021-10-7

1、 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 applications and websites. Some time ago, it was the adaptation of wechat that caused hot discussion again. Dark mode can not only greatly reduce the power consumption and weaken the strong light contrast, but also provide better visibility and immersion.

How to switch dark mode

  • IOS: settings – display and brightness – appearance, select dark
  • Android: “system settings” – “display” – “dark mode”.

2、 Question

If the system sets dark mode and H5 page is not processed accordingly, some display problems such as background color conflict, abnormal display of dark text, abnormal display of dark Icon and so on will occur.

Therefore, some adaptations need to be made to the dark mode.

I tried some solutions:

3、 H5 project adaptation dark mode scheme

1. Statement color scheme

color-scheme

There are two ways.

1.1meta

Declare in head<meta name="color-scheme" content="light dark"> , declare that the current page supports light and dark modes. When the system switches to dark mode, the browser default style will also switch to dark mode;

1.2CSS

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


:root {
    color-scheme: light dark;
}

Note: this declaration does not automatically adapt the page, but only affects the browser default style

More information can be found in the W3C documentation《CSS Color Adjustment Module Level 1》

2. Query through CSS media

prefers-color-scheme

CSS media feature is used to detect whether the user has set the theme color of the system to light or dark.

no-preference
Indicates that the system is not aware of the user’s options in this regard. In a Boolean context, its execution result is false.

light
Indicates that the user has informed the system that they have chosen an interface with a light color theme.

dark
Indicates that the user has informed the system that they have chosen 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;
    }
}
//In case of more colors, it is recommended to use CSS variables to manage color values

3. Picture adaptation

Use the picture + source tag to set the picture URL in different modes.

HTML < picture > elements provide image versions for different display / device scenes by containing zero or more < source > elements and one < img > element.
The browser will select the most matching child < source > element. If there is no matching, select the URL in the SRC attribute of the < img > element. The selected image is then rendered in the space occupied by the < img > element.

<picture>
    <!--  Pictures in dark mode -- >
    <source srcset="dark.jpg" media="(prefers-color-scheme: dark)" />
    <!--  Pictures in default mode -- >
    <img src="light.jpg"/>
</picture>

4. Judge the current mode in JavaScript & monitor the mode change

4.1matchMedia

WindowmatchMedia() 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 the document matches the media query, or monitor a document to determine whether it matches or stops matching the media query.

4.2addListener()
Of mediaquerylist interfaceaddListener()Method to add a listener to mediaquerylistener that will run 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 dark mode ')
    } else {
        Console.log ('Light mode now ')
    }
}

//Judge the current mode
darkModeHandler()
//Monitor mode change
mediaQuery.addListener(darkModeHandler)

This is the end of this article about the detailed explanation of the dark mode scheme of the HTML5 project adaptation system. For more information about the dark mode of HTML5, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!