优化深色模式下的评论系统

发表于 分类于 阅读次数： 本文字数： 1.4k 阅读时长 ≈ 3 分钟
修改评论系统在深色模式下的主题和背景颜色

NexT 主题很早就支持了深色模式，但是之前一直没有仔细配置过。其默认配置直接能用，但是有很多不协调的地方，特别是评论部分（因为要加载第三方插件）。

1. DisqusJS

这个改起来比较简单。主要是一些文字在深色模式下看不清楚，直接改一下颜色就可以了。

source/_data/style.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@media (prefers-color-scheme: dark) {
  #dsqjs:focus, #dsqjs:hover {
    color: #c2c6cc !important;
  }

  .dsqjs-no-comment, .dsqjs-nav-tab, .dsqjs-tab-active, .dsqjs-post-body {
    color: #3A8FB7 !important;
  }

  #dsqjs a {
    color: #3A8FB7 !important;
    &:hover {
      color: #2EA9DF !important;
    }
  }

  .dsqjs-order-label {
    color: #666;
  }

2. Disqus

这个比较麻烦。主要是 Disqus 自带的暗色模式背景颜色特别深（#121212），跟旁边的背景颜色差别比较大。两者又是直接嵌套在一起，也没有边界，显得特别突兀。而 Disqus 的评论部分又是一个 <iframe>，没有办法直接修改里面元素的颜色。

解决方法是使用 CSS 的混合模式：

source/_data/style.styl
1
2
3
4
5
6
@media (prefers-color-scheme: dark) {
  iframe[src*="disqus.com"] {
    background-color: #333 !important;
    mix-blend-mode: lighten;
  }
}

这样，比旁边背景深的颜色（实际上就只有 Disqus 的背景部分）都会被替换成和旁边背景一样的颜色，整个评论部分完全融入到了旁边的背景之中。

3. Giscus

Giscus 自带的 preferred_color_scheme 主题支持自动切换 Github Light 和 Github Dark 两种主题，但是 Github Dark 主题的问题和上面 Disqus 类似，颜色和 NexT 的深色模式背景不搭。

好在 Giscus 支持自定义主题，我把 Github Light 和 Noborder Dark 两个主题合并起来，得到一个新的主题文件。

然后配置 NexT：

_config.next.yml
1
2
3
giscus:
  ...
  theme: https://wangjiezhe.com/css/giscus.min.css

这里我还遇到了跨域（CORS）的问题。我是使用 caddy 托管网站，需要设置一下：

1
2
3
4
5
6
7
8
9
wangjiezhe.com {
  ...

  @cors {
    path /css/*
  }

  header @cors Access-Control-Allow-Origin "*"
}

附：上面用到的一些颜色：

  • 千草 - #3A8FB7
  • 露草 - #2EA9DF
  • 暗黑 - #333
  • 暗灰 - #666