|
原文于2020年5月31日首发在我的博客，你能够点击这儿进行查看。以下为正文。
越来越多的系统 (iOS, macOS) 对深色模式进行了支持，各样 app 亦在 App Store 的政策压力下对深色模式进行了适配。这一系统级的功能，亦能够被咱们利用来将网页适配深色模式。
实现
为了实现 HTML5 的深色模式，咱们必须利用 prefers-color-scheme 媒介特性。它能够帮忙检测设备的深色模式开启状况。不外，这一办法并不可完美处理所有状况，你还必须重视下面这一点。 日前，若结果为 no-preference，没法经过此媒介特性获知宿主系统是不是支持设置主题色，或用户是不是主动将其设置为没偏好。出于隐私守护等方面的思虑，用户或用户代理亦可能在有些状况下在浏览器内部将其设置为 no-preference。——prefers-color-scheme – CSS（层叠样式表） | MDN兼容状况
在 Can I Use
中，咱们能够认识到 prefers-color-scheme 的兼容性亦是十分给力的。
CSS 适配
prefers-color-scheme 的适配方式有两种：CSS 适配和 JavaScript 适配。在这儿仅介绍 CSS 适配方式。
咱们能够直接运用 @media(prefers-color-scheme: dark) 进行适配操作。
为了更好地理解，我简单写了一个适配 prefers-color-scheme 的页面，你能够在这儿进行查看。
这个页面对深色模式做了以下更改。 html {bac公斤round: #111;}body {bac公斤round-color: #272727; color: #fff;}a {color: #50a8d8}Demo
@media (prefers-color-scheme: dark) {
body {
bac公斤round: #222;
color: #eee;
}
}
以上这段 CSS 是一个非常简单的Demo。它会在深色模式下更改页面的 bac公斤round 和 color。当然，这么简单的修改针对某些网站来讲其实已然足够了（例如：你不会百度吗）。
总结
这篇文案仅仅是阐述 prefers-color-scheme CSS 的简单适配办法。倘若你想深入认识，亦举荐你看一下以下这几篇文案。 prefers-color-scheme – CSS: Cascading Style Sheets | MDN为你的网页添加深色模式 – 疯狂的技术宅 – SegmentFault 思否prefers-color-scheme: Hello darkness, my old friend
| 
发表于 2024-6-30 03:52:15
