Home > Article > Web Front-end > How to implement dark mode in html
How to implement dark mode in html
- 王林forward
- 2020-04-05 15:30:473889browse
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!