CSS瞬间黑暗模式

最近微信也逃脱不了黑暗时代的到来，网页也很多都做了黑暗模式的兼容和主题。如果我们在做的一个网站想瞬间实现黑暗模式可以怎么实现呢？

其实有一个很快的方式，我们可以使用invert和hue-rotate两个CSS3过滤器来实现。

filter: invert() — 是从0到1的刻度，1是从白变黑。filter: hue-rotate() — 用于改变你元素的颜色，同时或多或少保持原本相同的色系。这个属性的值可以从0deg到360deg。

在我们页面的body标签上添加这两个属性，我们就可以快速尝试把我们的网站变成"黑暗模式"。这里需要注意的是，如果body和html上没有设置background背景颜色，这个过滤就会不起效了哦。

CSS的代码如下：

html {
  background: #fff;
}


body {
  background: #fff;
  filter: invert(1) hue-rotate(270deg);
}

实现效果

这里我们会发现图片的颜色会受影响，并不是很美观，使用css过滤器是无法完美切换黑暗模式的。不过使用JavaScript辅助就可以完美的切换黑暗模式。

最近出了一个JavaScript辅助插件叫Darkmode.js。

???? Darkmode.js

其实Darkmode.js运用的也是css里面的一个特性叫mix-blend-mode — “CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合“。加上Javascript的辅助判断哪些页面上的元素需要黑化的，哪些是不需要黑化的。就会想我们之前那种做法，导致其他不需要黑化的元素，比如图片，受到影响导致颜色出现问题。

使用Darkmode.js非常简单，只要在脚本里面添加以下代码就可以马上加入一个插件，

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script>
<script>
  // 这些是这个插件的可配置项：
  var options = {
    bottom: "32px", // 定位底部距离 - 默认: '32px'
    right: "32px", // 定位右边距离 - 默认: '32px'
    left: "unset", // 定位左边距离 - 默认: 'unset'
    time: "0.5s", // 默认动画时间: '0.3s'
    mixColor: "#fff", // 需要改变的颜色 - 默认: '#fff'
    backgroundColor: "#fff", // 背景颜色 - 默认: '#fff'
    buttonColorDark: "#262728", // 黑暗模式下按钮颜色 - 默认: '#100f2c'
    buttonColorLight: "#fff", // 日间模式下按钮颜色 - 默认: '#fff'
    saveInCookies: true, // 是否在cookie保存当前模式 - 默认: true,
    label: "????", // 切换模式按钮图标 - 默认: ''
    autoMatchOsTheme: true // 是否自动根据系统适应模式 - 默认: true
  };


  let darkmode = new Darkmode(options);
  darkmode.showWidget();
</script>

如果你不希望用这个插件的默认按钮，你可以在你的JavaScript代码中自主控制。我们可以通过.toggle()方法来切换模式，同时可以使用.isActivated()来检测是否已经进入黑暗模式。

const darkmode =  new Darkmode();
darkmode.toggle();
console.log(darkmode.isActivated()) // 如果已经进入黑暗模式会返回 true

????知识总结

• filter: invert() — 可以把页面从白变黑，也可以从黑变白。

• filter: hue-rotate() — 用于改变你元素的颜色，同时或多或少保持原本相同的色系。

• Darkmode.js — 瞬间实现黑暗模式。

• 源码：https://darkmodejs.learn.uno/
  

最后

看完点个赞，分享一下吧，让更多的朋友能够看到。如果你喜欢前端开发博客的分享，就给公号标个星吧，这样就不会错过我的文章了。

公众号后台回复【前端】加入群

好文和朋友一起看~