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

Implement QR code scanning function through Vue

hint This plug-in can only be accessed under the ...

Detailed steps for completely uninstalling MySQL 5.7

This article mainly summarizes various problems o...

Summary of 76 Experience Points of User Experience

Classification of website experience 1. Sensory e...

How to use dynamic parameters and calculated properties in Vue

1. Dynamic parameters Starting from 2.6.0, you ca...

Use dockercompose to build springboot-mysql-nginx application

In the previous article, we used Docker to build ...

The shortest JS to determine whether it is IE6 (IE writing method)

Commonly used JavaScript code to detect which ver...

A brief discussion on the optimization of MySQL paging for billions of data

Table of contents background analyze Data simulat...

Reflection and Proxy in Front-end JavaScript

Table of contents 1. What is reflection? 2. Refle...

Detailed explanation of vuex persistence in practical application of vue

Table of contents vuex persistence Summarize vuex...

How to implement html input drop-down menu

Copy code The code is as follows: <html> &l...

IE8 browser will be fully compatible with Web page standards

<br />According to foreign media reports, in...

WeChat applet to save albums and pictures to albums

I am currently developing a video and tool app, s...

Java imports data from excel into mysql

Sometimes in our actual work, we need to import d...

Detailed explanation of the difference between url ending with / and without / in nginx proxy_pass configuration

When nginx configures proxy_pass, the difference ...

How much data can be stored in a MySQL table?

Programmers must deal with MySQL a lot, and it ca...