Kratos-Rebirth 用了挺久,一直有两个不顺眼的地方:没有「默认深色」的开关,全站还是一刀切的直角。这篇记录不用改主题源码、纯靠配置注入完成这两项微调的过程,附全部代码。
背景
先说结论性认知:Kratos-Rebirth 的明暗模式是「跟随系统 + localStorage 记忆」。
翻一下它的 kr-theme.min.js 就明白了:首次访问时看你系统的 prefers-color-scheme,你手动点过切换按钮后就用 localStorage['user-color-scheme'] 记住你的选择。设计是合理的,但问题是——我就想默认深色,系统偏偏是浅色,主题又没提供这个配置项。
圆角是另一个执念。主题作者走的是硬朗直角风,文章卡片、侧栏挂件、弹窗、按钮全部 90 度棱角分明。风格见仁见智,但配合我现在这套皮肤,圆一点确实顺眼多了。
改 node_modules 里的主题源码?想都别想,一次 npm install 就打回原形。好在 Kratos-Rebirth 提供了 additional_injections 配置注入点,可以在 _config.kratos-rebirth.yml 里往页面 <head> 塞自定义的脚本和样式,主题升级也不受影响。
默认深色:抢在主题脚本前面写 localStorage
思路很简单:既然主题启动时会读 localStorage,那我在它之前把值预设成 dark 不就行了。
additional_injections: |
几个细节:
- 只写一次:
if (!localStorage.getItem(KEY))保证只对没做过选择的访客生效,手动切回浅色的用户不会被强行掰回来 - 光写 localStorage 不够:主题的深色样式表初始是
media="(prefers-color-scheme: dark)",要立刻把它的media改成all并设置data-theme,不然从浅色跳深色会闪一下白屏 - try-catch 兜底:Safari 隐私模式下
localStorage直接抛异常,别让整个脚本挂掉
全站圆角:摸类名 + border-radius 轰炸
Kratos 的样式是编译后的 kr-core.min.css,没有源码可改(也不想改),所以直接在注入的 <style> 里用选择器覆盖。先把主要元素的类名摸出来:
<style> |
!important 是必须的——编译后的样式特指性不低,注入样式又排在它后面加载,加上 !important 最省心。
踩坑小结
- 「改了没生效」九成是浏览器缓存。中途有一轮怎么改都没反应,最后发现浏览器缓存了旧的
<style>,强制刷新(Cmd+Shift+R)世界立刻美好。调样式先怀疑缓存,能少走一半弯路 overflow: hidden是圆角的好搭档。挂件和弹窗内部有带背景色的头部块(比如个人信息卡的顶部背景图、弹窗的彩色标题条),光给外层容器加圆角没用,内部色块会用直角顶出来。容器加overflow: hidden一刀剪平- 圆角要一轮一轮补。第一版只覆盖了肉眼最大的卡片,结果卡片底栏、个人信息卡顶部、上一篇下一篇、打赏弹窗、右下角浮动按钮全是漏网之鱼——直角这东西,漏一处就特别显眼。终极方案就是把页面从上到下扫一遍,
class名一个个从渲染后的 HTML 里扒 hexo server改配置后要重启。watch 模式对模板变更是热更新,但_config变更后它经常拿旧缓存糊弄你,clean + 重启 server才是稳妥操作
最后
整套改动就一个配置文件 43 行增量,不碰主题源码,升级无忧,不想要了整段删掉即可。配合之前加的 sitemap 和 RSS,博客这波算是里外都收拾顺了。