为你的 Giscus 换新装吧

Giscus 默认的 preferred_color_scheme 主题是 Github Light / Dark。虽然经典，但如果博客设置了自定义字体或者主题色，Giscus 就显得不是那么般配了。

当然，Giscus 提供了自定义主题的能力，需要引入自托管的 CSS：

1	data-theme: https://watermelonabc.top/css/preferred_color_scheme.css

注意自托管的 CSS 文件不要通过 GitHub 的原始链接或 raw.githubusercontent.com，而应该通过部署网站域名获取。^[1]

Giscus Doc

您可以使用 CSS 文件的 URL 作为 data-theme 属性的值，而不是使用内置主题。该 URL 将被 giscus 用于构建 <link rel="stylesheet"> 元素，作为 <head> 元素的最后一个子元素。

由于 Stellar 暂时无法使用 preferred_color_scheme 以外的主题^[2]，因此想要使用自定义主题色就需要将其他主题的配置 “偷渡到” preferred_color_scheme.css 中。为了达到较好的明暗主题适配，建议准备好同一颜色主题下的亮 / 暗主题。Giscus 仓库已经存放了几个主题。我使用的是 Catppuccin Latte / Mocha。

接下来是引入自定义字体。根据 [suggestion] expose font family variables for custom themes 的描述，只需要在 CSS 前添加 @font-face（本地引入）或者 @import（CDN 引入）字体文件，然后定义：

:host, html {
  --font-family-sans: <your sans serif font>;
  --font-family-monospace: <your monospace font>;
  --font-family-serif: <your serif font>;
  --font-family-default: var(--font-family-<X>);
}

就可以了！

现在你应该可以在本文的评论区看到 Giscus 的样式变化。

更多信息请参阅创建新主题。