feat: enhance utterances support with auto theme adaptation

Author: D-Sketon

README.en.md

@@ -545,14 +545,15 @@ disqus:
   shortname: "your shortname"
   count: true # Whether to enable comment count statistics
 ```
+
 If using utterance [utterances](https://utteranc.es/)
 Please set `utterances.enable` to `true `in your theme's `_config.yml` and fill in your own `repo`
 ```yml
 utterances:
   enable: true
   repo: owner/repo # Change this to "Your GitHub Username/The Repository Name" used for storing blog comments
   issue_term: title
-  theme: github-light
+  theme: github-light # You can use auto to automatically adapt to dark and light themes
 ```
 
 </details>

README.md

@@ -551,14 +551,15 @@ disqus:
   shortname: "your shortname"
   count: true # 是否启用评论数量统计
 ```
+
 若基于 [utterances](https://utteranc.es/)
 请在内层 `_config.yml` 中将 `utterances.enable` 改为 `true`，并填入自己的 `repo`
 ```yml
 utterances:
   enable: true
   repo: owner/repo # 这里需要修改为 你的 GitHub 用户名/刚刚创建的，用户保存博客评论的 GitHub 仓库名
   issue_term: title
-  theme: github-light
+  theme: github-light # 你可以使用 auto 来自动适配深色和浅色主题
 ```
 </details>
 <details>

_config.yml

@@ -398,7 +398,8 @@ utterances:
   enable: false
   repo: owner/repo # Change this to "Your GitHub Username/The Repository Name" used for storing blog comments
   issue_term: title
-  theme: github-light
+  theme: auto # auto means to automatically adapt to dark and light themes, you can also use specific themes like github-light, github-dark, preferred-color-scheme, etc.
+
 disqus:
   enable: false
   shortname: # your disqus shortname

layout/_partial/article.ejs

@@ -60,11 +60,6 @@
           <%= __('comment') %>
         </a>
       <%_ } _%>
-      <%_ if (post.comments !== false && theme.utterances.enable && theme.utterances.repo) { _%>
-      <a data-aos="<%= theme.animation.options.article.comment %>" href="<%- url_for_lang(post.path) %>#comments" class="article-comment-link">
-         <%= __('comment') %>
-      </a>
-      <%_ } _%>
       <%_ if (post.comments !== false && theme.disqus.enable && theme.disqus.shortname && theme.disqus.count) { _%>
         <a data-aos="<%= theme.animation.options.article.comment %>" href="<%- full_url_for_lang(post.path) %>#disqus_thread" class="article-comment-link" id="disqus-count">
         </a>

layout/_partial/post/comment.ejs

@@ -190,18 +190,33 @@
       if (!container) return;
       container.style.display = 'block';
 
+      let theme = '<%= theme.utterances.theme || "github-light" %>';
+      const parsedTheme = theme === 'auto' ? (document.documentElement.getAttribute('data-theme') === 'dark' ? 'github-dark' : 'github-light') : theme;
+
       // 创建 utterances 脚本
       const script = document.createElement('script');
       script.src = 'https://utteranc.es/client.js';
       script.setAttribute('repo', '<%= theme.utterances.repo %>');
       script.setAttribute('issue-term', '<%= theme.utterances.issue_term || "pathname" %>');
-      script.setAttribute('theme', '<%= theme.utterances.theme || "github-light" %>');
+      script.setAttribute('theme', parsedTheme);
       script.setAttribute('crossorigin', 'anonymous');
       script.async = true;
 
       // 清空容器（防止重复加载）并插入脚本
       container.innerHTML = '';
       container.appendChild(script);
+      if (theme === 'auto') {
+        document.body.addEventListener('light-theme-set', () => {
+          const iframe = container.querySelector('iframe.utterances-frame');
+          if (!iframe) return;
+          iframe.contentWindow.postMessage({ type: 'set-theme', theme: 'github-light' }, 'https://utteranc.es');
+        });
+        document.body.addEventListener('dark-theme-set', () => {
+          const iframe = container.querySelector('iframe.utterances-frame');
+          if (!iframe) return;
+          iframe.contentWindow.postMessage({ type: 'set-theme', theme: 'github-dark' }, 'https://utteranc.es');
+        });
+      }
     }
   },
   <%_ } _%>

scripts/filter/stylus.js

@@ -99,6 +99,7 @@ hexo.extend.filter.register("stylus:renderer", (style) => {
     themeConfig.gitalk?.clientID &&
     themeConfig.gitalk?.clientSecret;
   const hasGiscus = themeConfig.giscus?.enable;
+  const hasUtterances = themeConfig.utterances?.enable && themeConfig.utterances?.repo;
   style
     .define(
       "article-families",
@@ -237,5 +238,6 @@ hexo.extend.filter.register("stylus:renderer", (style) => {
     .define("has-valine", hasValine)
     .define("has-waline", hasWaline)
     .define("has-gitalk", hasGitalk)
-    .define("has-giscus", hasGiscus);
+    .define("has-giscus", hasGiscus)
+    .define("has-utterances", hasUtterances);
 });

source/css/_partial/comment.styl

@@ -173,6 +173,12 @@ if (has-gitalk) {
   }
 }
 
+if (has-utterances) {
+  .utterances {
+    max-width: none !important;
+  }
+}
+
 $base-comment-style {
   color: var(--color-default) !important;
   @extend $base-style;