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

Solution to 404 Problem of Tomcat Installation in Docker

Find the containerID of tomcat and enter the toma...

9 Tips for MySQL Database Optimization

Table of contents 1. Choose the most appropriate ...

Detailed tutorial on configuration method of Mysql 5.7.19 free installation version (64-bit)

Download mysql-5.7.19-winx64 from the official we...

JS uses clip-path to implement dynamic area clipping function

background Today, I was browsing CodePen and saw ...

How to use JavaScript strategy pattern to validate forms

Table of contents Overview Form validation withou...

Detailed explanation of data type issues in JS array index detection

When I was writing a WeChat applet project, there...

Vue's new partner TypeScript quick start practice record

Table of contents 1. Build using the official sca...

Detailed explanation of how to use Vue+element to implement the tag at the top of the page

Table of contents 1. Page Rendering 2. Switch tag...

Detailed explanation of the limitations and restrictions of MySQL partitioned tables

Disable Build Partition expressions do not suppor...

Vue implements interface sliding effect

This article example shares the specific code of ...

How to make full use of multi-core CPU in node.js

Table of contents Overview How to make full use o...

Detailed explanation of the usage and difference between nohup and & in Linux

Example: We use the Python code loop_hello.py as ...

Detailed explanation of Linux inotify real-time backup implementation method

Real-time replication is the most important way t...

Tutorial on installing DAMO database on Centos7

1. Preparation After installing the Linux operati...

Detailed explanation of Deepin using docker to install mysql database

Query the MySQL source first docker search mysql ...