Html page supports dark mode implementation

Html page supports dark mode implementation

Since 2019, both Android and IOS platforms have started to use dark mode. Of course there is nothing wrong with this, but when our page is opened by the user in dark mode, they will be instantly blinded by the traditional white color.

The following will briefly talk about how to make the page support dark mode.

Prepare

In fact, we just need to use the prefers-color-scheme media query in CSS.

  1. no-preference indicates that the user has not specified an operating system theme. As a Boolean value, false is output.
  2. light indicates that the user's operating system is a light theme.
  3. dark indicates that the user's operating system has a dark theme.

illustrate

  1. At the time of this article, WeChat was not able to get the prefers-color-scheme parameter, so when we open the page in WeChat, dark mode is not currently supported.
  2. This method is just a simple demo, and you can use this method to expand other implementation methods.
  3. prefers-color-scheme description
  4. DEMO address

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Adapt the page to dark mode</title>
</head>
<body class="back">
<div class="models"><h1>Test text</h1></div>
</body>
</html>

CSS

.back {background: white; color: #555;text-align: center}

@media (prefers-color-scheme: dark) {
  .back {background: #333; color: white;}
  .models {border:solid 1px #00ff00}
}

@media (prefers-color-scheme: light) {
  .back {background: white; color: #555;}
  .models {border:solid 1px #2b85e4}
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<:  MySQL uses custom sequences to implement row_number functions (detailed steps)

>>:  Using css-loader to implement css module in vue-cli

Recommend

Tutorial on using hyperlink tags in XHTML

Hyperlink, also called "link". Hyperlin...

HTML5+CSS3 header creation example and update

Last time, we came up with two header layouts, on...

Detailed method of using goaccess to analyze nginx logs

Recently I want to use goaccess to analyze nginx ...

JavaScript to achieve dynamic table effect

This article shares the specific code for JavaScr...

Solution for Vue routing this.route.push jump page not refreshing

Vue routing this.route.push jump page does not re...

Linux dual network card binding script method example

In Linux operation and configuration work, dual n...

Element's el-tree multiple-select tree (checkbox) parent-child node association is not associated

Attribute check-strictly The official document pr...

MySQL replication mechanism principle explanation

Background Replication is a complete copy of data...

MySQL installation and configuration method graphic tutorial (CentOS7)

1. System environment [root@localhost home]# cat ...

A brief discussion on the solution of Tomcat garbled code and port occupation

Tomcat server is a free and open source Web appli...

Ideas for creating wave effects with CSS

Previously, I introduced several ways to achieve ...

Detailed explanation of the principles and usage examples of MySQL join query, union query, and subquery

This article uses examples to illustrate the prin...

JavaScript implements password box input verification

Sometimes it is necessary to perform simple verif...

JavaScript implements an input box component

This article example shares the specific code for...

Get the calculated style in the CSS element (after cascading/final style)

To obtain the calculated style in a CSS element (t...