Home >Web Front-end >HTML Tutorial >How to implement dark mode in html

How to implement dark mode in html

王林
王林forward
2020-04-05 15:30:474003browse

How to implement dark mode in html

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

Preparation

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

no-preference indicates that the user has not specified an operating system theme. When used as a Boolean value, false is output.

light indicates that the user's operating system is a light theme.

dark means that the user's operating system has a dark theme.

(Recommended tutorial: html tutorial)

Note

When this article was published, WeChat could not get prefers-color -scheme parameter, so when we open the page in WeChat, dark mode is not currently supported.

This method is just a simple demo, you can use this method to expand other implementation methods.

prefers-color-schemeDescription

DEMOAddress

HTML

<!DOCTYPE html>
<html>
<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>页面适应黑暗模式</title>
</head>
<body>
<div><h1>测试文字</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}
}

Recommended related video tutorials: html video tutorial

The above is the detailed content of How to implement dark mode in html. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:jb51.net. If there is any infringement, please contact admin@php.cn delete