给博客加上了夜间模式

照网上搜到的内容给icarus加了夜间模式。改了一部分css和js,主要是给夜间模式加上了背景图,并能够在切换模式的时候自由切换,判断系统是否处于深色模式的部分也改了一下。然后切换模式的时候会重新生成 Mermaid 图来匹配模式。

mermaid的导入

传统的导入会在导入 mermaid.min.js 文件之后立即渲染,用ES6模块导入可以手动控制渲染时机。不过初始渲染的时机好像没必要控制,所以都差不多。

要重新渲染页面上已经渲染好的mermaid,删掉元素的 data-processed 属性,然后将 innerHTML 替换为原始数据,再 mermaid.init({ theme: "dark" }, ".mermaid") 即可。

不过有个巨坑的地方,safari浏览器以及基于safari的浏览器都不支持mermaid10.4.0以上的版本,手上没有mac,用手机导入​ Eruda 调试,报错都不报错,傻逼的很import有问题整个script的代码都不运行了。最后手动alert(error),发现报错只报个 unexpect token '{',连哪个文件多少行都不说。最后找到是mermaid的版本太高了,懒得折腾是什么原因报错了,直接换了个低版本。

然后是评论区渲染mermaid的功能需要改gittalk的代码,太麻烦了,懒得弄了。

!!! update: 玛德傻逼Safari,无语死了,为了兼容这傻逼玩意,浪费我大半天。

参考

给博客加上了夜间模式

https://psu.monster/post/2025/57aaaa0d29ef

作者

psu

发布于

2025-11-21

更新于

2025-11-24

许可协议

评论

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×