简单粗暴实现深色模式

背景

自从 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;}}