CSS适配系统级黑夜模式
1个月前
转载
超过51天
温馨提示
本文最后更新于2024年07月27日，已超过51天没有更新，若内容或图片失效，请留言反馈。
坚守 Typecho 默认主题，一直没有去适配暗黑模式。今晚朋友逛进来差点被白光亮瞎眼，疯狂输出、险些挨打。于是，抓紧适配暗黑模式(黑夜主题)。偷懒不写JS，于是砍掉了手动切换按钮的需求，直接纯 CSS 代码控制，直接跟随系统级主题模式进行设定。
@media (prefers-color-scheme: dark) {
html {
filter: invert(90%) hue-rotate(180deg);
}
img, video, svg {
filter: invert(110%) hue-rotate(180deg);
opacity: .8;
}
}
invert 将所有色值反转，一般取值为 100%，但是这样反转得到的黑色往往太过黑，眼睛看起来反而有点累，因此我觉得 90% 是一个更合理的值；
hue-rotate 将黑白以外的其它主色调再反转回来（防止页面主题色出现大的变化）；
图片、视频等其它不需要被反转的元素再反转回来，增加一点透明度，让其不那么刺眼；（如果 html 反转 90%，则图片等元素需要反转 110%）
文章来源于：https://www.8c6c.com/archives/css-change-dark-system.html
none
本作品采用知识共享许可协议知识共享署名-非商业性使用-禁止演绎 3.0 中国大陆许可协议进行许可授权。即要求您在需要转载、引用本文全文或者部分时，请按照协议要求署名，并在保证不进行任何修改、续写等演绎形式，并不用于商业性项目的情况下使用。如果本文有侵犯到您的权益，请直接向我们留言反馈。
0 赞
or 打赏
喜欢就打赏一点
.png "走失两天的狗子终于找到它的家了")
.png "顶着三十几度的天气去钓鱼了")
.png "\"微博客\"一款自己开发自己用的垃圾源码（慢慢更新中）")
