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

Nginx improves access speed based on gzip compression

1. Why does nginx use gzip? 1. The role of compre...

Introduction to the usage of common XHTML tags

There are many tags in XHTML, but only a few are ...

After Apache is installed, the service cannot be started (error code 1 appears when starting the service)

Table of contents 1. Error message 2. Cause of er...

Detailed discussion of the character order of mysql order by in (recommended)

//MySQL statement SELECT * FROM `MyTable` WHERE `...

Solve the problem that VMware cannot install 64-bit operating system in win10 home version

Problem Description When VMware Workstation creat...

How to deploy redis in linux environment and install it in docker

Installation Steps 1. Install Redis Download the ...

Detailed explanation of incompatible changes in rendering functions in Vue3

Table of contents Rendering API changes Render fu...

How to install MySQL 5.7 from source code in CentOS 7 environment

This article describes how to install MySQL 5.7 f...

Detailed explanation of Vue's custom event content distribution

1. This is a bit complicated to understand, I hop...

Javascript Bootstrap's grid system, navigation bar and carousel detailed explanation

Table of contents Introduction to bootstrap and i...

JavaScript imitates Jingdong magnifying glass special effects

This article shares the specific code of JavaScri...

Commands to find domain IP address in Linux terminal (five methods)

This tutorial explains how to verify the IP addre...

Detailed explanation of dynamic Christmas tree through JavaScript

Table of contents 1. Animated Christmas Tree Made...

Linux uses NetworkManager to randomly generate your MAC address

Nowadays, whether you are on the sofa at home or ...

GZIP compression Tomcat and improve web performance process diagram

1. Introduction I recently worked on a project an...