落雨宸的时光机
125 字
1 分钟
0
一行 CSS 代码实现网页深色模式

原文链接:http://www.dev.to/akhilarjun/one-line-dark-mode-using-css-24li

这个操作真的太厉害了,太适合咱这种懒人了(x

假如原站为白色,

先加入这行代码反转全站颜色:

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

再加入这行代码反转图片颜色!理由嘛……反色两次不就变回原来的颜色了嘛(

html[theme='dark-mode'] img{
    filter: invert(1) hue-rotate(180deg);
}

然后就……完成了?

可以再加个动画:

html {
    transition: color 300ms, background-color 300ms;
}

就是这么简单!效果不咋样罢了(x

一行 CSS 代码实现网页深色模式
https://blog.lzc256.com/posts/one-line-dark-mode-using-css/
作者
落雨宸
发布于
2023-06-04
许可协议
CC BY-NC-SA 4.0