Practice make perfect

博客添加黑暗模式

最近晚上看博客觉得太亮了,有点伤眼,于是想到添加黑暗模式,由于懒得自己写样式,于是找到了 Darkmode.Js, 只需几行代码便可为博客添加黑暗模式

Darkmode.Js

文档与演示界面

代码注入

Ghost blog 支持 Code injection

Ghost allows you to inject code into the top and bottom of your theme files without editing them. This allows for quick modifications to insert useful things like tracking codes and meta tags

因此仅需在Site Footer添加以下代码即可

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script>
<script>
  new Darkmode({ label: '🌓' }).showWidget();
</script>

然而 tag a 标签 及 文章中的h2标签 并没有生效。。。

tag a h2

于是只能添加 CSS 自己定制下

<style type="text/css">
    .darkmode--activated h2{
        color: white;
    }
    .darkmode--activated .tags a{
        background: #585555;
    }
</style>

写在主题中

刚刚是通过 cdn 方式引入,也可以把 js 下载下来,本地引入,以及把 css 写入主题模板default.hbs

这里有一个坑,主题需要切换一下才生效

尚存在的问题

  • 文中的表情也会反色 (好在我也不怎么用表情)
  • 黑暗模式下页面首次加载时会有非黑暗模式闪过

评论