让你的网站支持 windows10、macOS 和 IOS 的深色模式

前言

如果你在使用 macOS 10.14.4 或者较新的 windows 10 之后的系统,在系统内开启深色模式,打开 Safari 浏览器,你会发现我的博客变成了暗黑版本。

深色模式(Dark Mode)是 Apple 在 macOS Mojave 上全新推出的一项功能,macOS 内置的 App 能完美支持,凭借着易用的接口,越来越多的第三方 App 已经进行了适配,可大家使用最多的浏览器却没能很好的支持,虽然你可以使用 Safari 的阅读视图浏览深色模式下的页面内容,但体验终归没有网站自身支持的好。

原因主要有两个,一是浏览器没有给出让开发者适配的接口,二是网站设计并不统一,强行进入深色模式会破坏页面的设计和内容的可读性。

于是经过几次的升级,macOS 终于在 Safari 12.1 中加入了一个新的媒体查询 prefers-color-scheme,并且 FireFox 67 和最新版 chrome 浏览器也开始进行支持,其他浏览器的具体支持情况可在这里查看:https://caniuse.com/#search=prefers-color-scheme

简单使用

Name: prefers-color-scheme
For: @media
Value: no-preference | light | dark
  • no-preference:无颜色偏好
  • light:浅色模式
  • dark:深色模式

和你是用的其他媒体查询一样,用起来很简单

@media (prefers-color-scheme: light) {
/* 浅色模式样式 */
}

@media (prefers-color-scheme: dark) {
/* 深色模式样式 */
}

默认都是浅色模式的,所以我们只写深色模式的样式就行

使用 CSS 变量

现在也页面都会涉及到大量的样式,要适配深色模式,最好使用变量。

:root {
--background-color: #FFFFFF;
--content-color: #15171A;
}

@media (prefers-color-scheme: dark) {
:root {
--background-color: #222;
--content-color: #dfdfdf;
}
}

.main-page {
background: var(--background-color);
}

.full-content {
color: var(--content-color)
}

上面的例子中,只定义了几个颜色相关的样式,事实上你可以跟其他媒体查询一样,定义其他的样式,让你的深色模式有更多不同的布局。

颜色

颜色这个就看自己喜欢了,不过要注意一点,如果你是使用 macOS 内置 App 的配色,强调色会改变一些基础配色,比如强调色不是石墨色的时候,背景颜色会变得比较暖。

在设置颜色的时候,要保证内容的可读性,我们需要将文本和背景的颜色对比度保持在一个安全的范围内,这时候你需要用到这个工具: https://github.com/leaverou/contrast-ratio

图片

在写好颜色相关的样式之后,你会发现页面上的图片变得很刺眼,这时你可以降低一下图片的透明度,具体降多少也是看你背景设置的色深,另外可以设置一下鼠标悬停时恢复透明度,这样能有更好的体验。

我用的 blazy 懒加载,所以是这样设置的

@media (prefers-color-scheme: dark) {
.b-lazy.b-loaded {
opacity: .9;
transition: opacity .5s ease-in-out;
}

.b-lazy.b-loaded:hover {
opacity: 1;
}
}

© 版权声明
来源:zhih.me
THE END
打赏一根烟,继续保持。
点赞1打赏作者 分享
评论 共2条
头像
友好交流,请勿发纯表情,请勿灌水,违者封号喔
提交
头像

昵称

取消
昵称表情代码图片
    • 头像佛系软件0