坚守 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;
    }
}
  1. invert 将所有色值反转，一般取值为 100%，但是这样反转得到的黑色往往太过黑，眼睛看起来反而有点累，因此我觉得 90% 是一个更合理的值；
  2. hue-rotate 将黑白以外的其它主色调再反转回来（防止页面主题色出现大的变化）；
  3. 图片、视频等其它不需要被反转的元素再反转回来，增加一点透明度，让其不那么刺眼；（如果 html 反转 90%，则图片等元素需要反转 110%）

标签: none

已有 5 条评论

  1. Rs梦泽 Rs梦泽

    默认主题本来就有一股大佬味，你还改成了这种优化版，好好好，不过你可以试试Freewind主题，功能挺多的，也免费，真心推荐，听说ty下个版本默认主题有黑暗风格了

    回复
  2. 译u 译u

    这个默认主题不错哟

    回复
  3. 泽泽 泽泽

    据说下个版本的默认主题就有深色模式了

    回复
    1. orange orange

      太好！！

      回复
  4. kk kk

    很不错的内容~

    回复

添加新评论