CSS适配系统级黑夜模式
3个月前
转载
超过56天
温馨提示
本文最后更新于2024年09月26日，已超过56天没有更新，若内容或图片失效，请留言反馈。
坚守 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
0 赞
or 打赏
喜欢就打赏一点
