Kratos主题微调:默认深色与全站圆角

  • ~3.72K 字

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:
head: |
<script>
/* 首次访问默认深色主题(用户手动切换后尊重其选择) */
(function () {
try {
var KEY = 'user-color-scheme';
if (!localStorage.getItem(KEY)) localStorage.setItem(KEY, 'dark');
if (localStorage.getItem(KEY) === 'dark') {
var el = document.getElementById('theme-dark-css');
if (el) { el.setAttribute('media', 'all'); el.removeAttribute('disabled'); }
document.documentElement.setAttribute('data-theme', 'dark');
}
} catch (e) { /* 隐私模式下静默降级 */ }
})();
</script>

几个细节:

  • 只写一次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>
/* 全站圆角 */
.kratos-entry-border { border-radius: 14px !important; } /* 文章卡片 */
.kratos-hentry { border-radius: 14px !important; }
.kratos-entry-post-meta { border-radius: 0 0 14px 14px !important; } /* 卡片底栏 */
.kratos-entry-thumb-img { border-radius: 10px !important; } /* 缩略图 */
.widget { border-radius: 14px !important; overflow: hidden; } /* 侧栏挂件 */
.widget-kratos-about .photo-background { border-radius: 14px 14px 0 0 !important; } /* 个人信息卡顶部 */
.kratos-copyright { border-radius: 14px !important; }
.page-number { border-radius: 10px !important; } /* 分页 */
.navigation.post-navigation .nav-previous a,
.navigation.post-navigation .nav-next a { border-radius: 10px !important; } /* 上一篇下一篇 */
.post-actions .donate,
.post-actions .share { border-radius: 10px !important; } /* 打赏分享按钮 */
.kr-modal-content { border-radius: 16px !important; overflow: hidden; } /* 弹窗 */
.kr-modal-header { border-radius: 16px 16px 0 0 !important; }
.kr-tool .box { border-radius: 10px !important; } /* 右下角浮动按钮 */
.kratos-post-content img { border-radius: 8px; } /* 正文元素 */
.kratos-post-content pre { border-radius: 10px; }
.kratos-post-content table { border-radius: 10px; overflow: hidden; }
</style>

!important 是必须的——编译后的样式特指性不低,注入样式又排在它后面加载,加上 !important 最省心。

踩坑小结

  • 「改了没生效」九成是浏览器缓存。中途有一轮怎么改都没反应,最后发现浏览器缓存了旧的 <style>,强制刷新(Cmd+Shift+R)世界立刻美好。调样式先怀疑缓存,能少走一半弯路
  • overflow: hidden 是圆角的好搭档。挂件和弹窗内部有带背景色的头部块(比如个人信息卡的顶部背景图、弹窗的彩色标题条),光给外层容器加圆角没用,内部色块会用直角顶出来。容器加 overflow: hidden 一刀剪平
  • 圆角要一轮一轮补。第一版只覆盖了肉眼最大的卡片,结果卡片底栏、个人信息卡顶部、上一篇下一篇、打赏弹窗、右下角浮动按钮全是漏网之鱼——直角这东西,漏一处就特别显眼。终极方案就是把页面从上到下扫一遍,class 名一个个从渲染后的 HTML 里扒
  • hexo server 改配置后要重启。watch 模式对模板变更是热更新,但 _config 变更后它经常拿旧缓存糊弄你,clean + 重启 server 才是稳妥操作

最后

整套改动就一个配置文件 43 行增量,不碰主题源码,升级无忧,不想要了整段删掉即可。配合之前加的 sitemap 和 RSS,博客这波算是里外都收拾顺了。

赞助喵
非常感谢您的喜欢!
赞助喵
分享这一刻
让朋友们也来瞅瞅!