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