写点什么

简单粗暴实现深色模式

用户头像
小小
关注
发布于: 2021 年 03 月 25 日

背景

自从 Mac OS、IOS 中有了 dark mode 之后, 手机 APP 的深色模式也开始出现在大众视野, 现在基于 webkit 内核的浏览器也逐步开始支持了。


页面中实现

在网页中如果要实现dark mode , 简单来看其实就是一个换肤的功能, 如果想要快速实现, 可以使用 css filter 来实现。


核心实现过程

  1. 在 HTML 节点上添加模式来指定当前的主题, 如果是深色模式, theme 为 dark-mode

  2. 基于按钮切换主题模式, 我们需要给按钮绑定事件切换 HTML theme 属性值


// 切换 theme事件let isLight = trueif(isLight){    document.querySelector("body").setAttribute('theme', "")}else{    document.querySelector("body").setAttribute('theme', "dark-mode")}
复制代码


  1. 设置 dart-mode 模式下的 css,可以使用一行代码快速实现(如果你的设计师给出了对应模式下的样式, 可以自定义)。 这里通过设置滤镜翻转和色彩旋转实现


body[theme="dark-mode"] {    filter: invert(100%) hue-rotate(180deg);}
复制代码

对应深色模式, 采用invert反转滤镜,将原有颜色进行反色处理, 此时的黑色变成白色, 所以颜色都类似; 然后结合hue-rotate色相旋转帮助处理其他非黑白的颜色, 将色相旋转 180deg, 能够确保页面的主题色不会改变, 而只是减弱其颜色。



对比效果会发现一个问题, 就是我们的图片也进行了反转滤镜和色相旋转了, 但是实际上我们希望图片可以被处理, 可以采用逆转的方式, 给图片添加如下样式:

body[theme="dark-mode"] img{    filter: invert(100%) hue-rotate(180deg);}
复制代码

深色模式就大功告成了, 效果如下:



ios 中的深色模式

iphone 手机进行 H5 页面开发时,很多时候也是要考虑深色模式的, 开发时可以借助prefers-color-scheme来检测用户是否有将系统的主题色设置为亮色或者暗色。


使用如下,就可以根据系统设置显示对应的模式:

@media (prefers-color-scheme: dark) {    body[theme="dark-mode"] {    filter: invert(100%) hue-rotate(180deg);}body[theme="dark-mode"] img {    filter: invert(100%)  hue-rotate(180deg);}body {    transition: filter 500ms;}}
复制代码


用户头像

小小

关注

还未添加个人签名 2019.08.05 加入

还未添加个人简介

评论

发布
暂无评论
简单粗暴实现深色模式