简单粗暴实现深色模式
背景
自从 Mac OS、IOS 中有了 dark mode
之后, 手机 APP 的深色模式也开始出现在大众视野, 现在基于 webkit 内核的浏览器也逐步开始支持了。
页面中实现
在网页中如果要实现dark mode
, 简单来看其实就是一个换肤的功能, 如果想要快速实现, 可以使用 css filter 来实现。
核心实现过程
在 HTML 节点上添加模式来指定当前的主题, 如果是深色模式, theme 为
dark-mode
基于按钮切换主题模式, 我们需要给按钮绑定事件切换 HTML theme 属性值
复制代码
设置 dart-mode 模式下的 css,可以使用一行代码快速实现(如果你的设计师给出了对应模式下的样式, 可以自定义)。 这里通过设置滤镜翻转和色彩旋转实现
复制代码
对应深色模式, 采用invert
反转滤镜,将原有颜色进行反色处理, 此时的黑色变成白色, 所以颜色都类似; 然后结合hue-rotate
色相旋转帮助处理其他非黑白的颜色, 将色相旋转 180deg
, 能够确保页面的主题色不会改变, 而只是减弱其颜色。
![](https://static001.geekbang.org/infoq/2b/2bfdaea42f1e694e908be73c87fdbce8.png)
对比效果会发现一个问题, 就是我们的图片也进行了反转滤镜和色相旋转了, 但是实际上我们希望图片可以被处理, 可以采用逆转的方式, 给图片添加如下样式:
复制代码
深色模式就大功告成了, 效果如下:
![](https://static001.geekbang.org/infoq/bb/bb18bcee0b852b86166e0fab4f6359be.gif)
ios 中的深色模式
iphone 手机进行 H5 页面开发时,很多时候也是要考虑深色模式的, 开发时可以借助prefers-color-scheme
来检测用户是否有将系统的主题色设置为亮色或者暗色。
使用如下,就可以根据系统设置显示对应的模式:
复制代码
评论