前端必看的8个HTML+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);
}

实现效果

最近出了一个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 — 瞬间实现黑暗模式。

微信号：739977464  请注明来意 

喜欢记得「点赞」或「在看」，让我们一起成长。

关注我们，点击下方二维码长按识别。