css3暗黑主题,整个纯 CSS 实现暗黑模式方案

整个纯 CSS 实现暗黑模式方案

:checked、+/~和 filter 三个点进行，缺一不可。看似简单，若不是常用 CSS 做特效也很难想象出区区三个点打辅助也能完成一个这么强大的功能。

网站主体

.ios-switch {

...

&:checked {

...

& + .main {

filter: invert(1) hue-rotate(180deg);

img,

video,

.exclude {

filter: invert(1) hue-rotate(180deg);

}

}

}

}

.main {

background-color: #fff;

transition: all 300ms;

}

按照设计原则来说，换肤只针对组件，像一些媒体类型的元素，例如背景、图片、视频等，都是不能直接处理的，需保持其原样。既然暗黑模式是使用了滤镜的反相和色相旋转实现，那么对这些媒体元素再次使用滤镜的反相和色相旋转就能复原了。

img,

video {

filter: invert(1) hue-rotate(180deg);

}

众所周知，背景是使用 background 系列属性进行声明的，因此无法通过特定的选择器进行标注。但是，可换种思路处理，就是给有背景的元素加上一个特定类名，将其包含到上述规则里即可。

本次的暗黑模式使用到两个滤镜函数：invert()、hue-rotate()。

invert()：反相，反向输出图像着色，值为 0%则无变化，值为 0~100%则是线性乘子效果，值为 100%则完全反转

hue-rotate()：色相旋转，减弱图像着色，处理非黑白的颜色，值为 0deg 则无变化，值为 0~360deg 则逐渐减弱，值超过 360deg 则相当绕 N 圈再计算剩余的值

invert()简单理解就是黑变白，白变黑，黑白颠倒。hue-rotate()简单理解就是冲淡颜色。为了确保主题色调不会改变，将色相旋转声明为 180deg 比较合理。

依据上述分析的思路，当按钮处于选中状态时使用+/~连带后面的同胞元素也进入选中状态。若同胞元素无背景色需声明 background-color:#fff，否则无法让滤镜效果起效，为了让这个同胞元素在使用滤镜效果时过渡得更自然，声明 transition:all 300ms。