阅读本文大概只需要 三分钟~

要实现一个 夜间模式 ，最少多少代码可以实现呢？

在开始之前，我们先了解一下这么几个 CSS 属性

filter

CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

注意这个 颜色偏移 ~

invert

filter: invert(1);

invert 可以反转输入图像，值为1 即 100%则完全反转。黑白反转，到对立的颜色上

hue-rotate

filter: hue-rotate(180deg)

hut-routate 可以让使色相旋转，传入一个角度，会按照色环旋转颜色的值。

色环

这里我们旋转 180 度来保证应用颜色主题不会变 —— 比如蓝色还是以蓝色为基调而不是变为红色

只是变成了 弱一点点的 蓝色

一行代码

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

将这行代码放到最顶层，就会让整个应用颜色反转。

像这样

.App[code-mode='dark'] {
	filter: invert(1) hue-rotate(180deg);
}

想保持原色？

有些 img 或者小图标或者其他什么的，不想反转颜色的话，你可以再来一次，加上一样的语句，把它再转回来就好了

像这样

.App[code-mode='dark'] .task-title::before {
	filter: invert(1) hue-rotate(180deg);
}

JS 代码

从我的 React 小项目里面截取的代码

加一个按钮，给按钮事件绑定一个 toggleModeClick就好了~

const toggleModeClick = () => {
	setMode(pre => (pre === MODE.LIGHT ? MODE.DARK : MODE.LIGHT));
};

App 那个上面添加一个 code-mode 属性就好了

<div className='App' code-mode={mode}>

commit 记录

想看代码全貌可以看这个 commit 记录

feat: toggle theme mode

效果

png: gif:

看起来不错，其实也还好😏

总结

css 中一个 filter 属性就能完成的夜间模式~ 反正第一次看到时我是觉得非常妙

当然，这种是偷懒的办法~ 大项目肯定不能是这样的哈哈

小项目、小demo 玩一下，熟悉一下这些平时用的比较少的 CSS 属性，还是挺有意思的

参考资源

dev.to/akhilarjun/…