Html页⾯⽀持暗⿊模式的实现
⾃19年开始，Android和IOS平台，都开始玩暗⿊模式。当然这没什么不好，但是当我们的页⾯被⽤户在暗⿊模式打开之后，会被那传统⼤⽩⾊瞬间闪瞎双眼。
下⾯会简单的说⼀下如何让页⾯⽀持暗⿊模式。
准备
其实，我们只是需要使⽤到css中的 prefers-color-scheme 媒体查询。
苹果暗黑模式1. no-preference 表⽰⽤户未制定操作系统主题。作为布尔值时，为 false 输出。
2. light 表⽰⽤户的操作系统是浅⾊主题。
3. dark 表⽰⽤户的操作系统是深⾊主题。
说明
1. 这篇⽂章发布的时候，还⽆法拿到 prefers-color-scheme 参数，所以当我们在中打开页⾯⽬前不⽀持暗⿊模
式。
2. 此⽅法只是⼀个简单demo，可以使⽤该⽅法拓展出其他实现⽅式。
3. prefers-color-scheme说明
4. DEMO地址
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>页⾯适应⿊暗模式</title>
</head>
<body class="back">
<div class="models"><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}
}
发布评论