前端必看的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非常简单，只要在脚本里面添加以下代码就可以马上加入一个插件，