feat: support useUtterances dark theme

demo/yun/.valaxy/typed-router.d.ts

@@ -51,8 +51,6 @@ declare module 'vue-router/auto-routes' {
     '/notes/': RouteRecordInfo<'/notes/', '/notes', Record<never, never>, Record<never, never>>,
     '/page/[page]': RouteRecordInfo<'/page/[page]', '/page/:page', { page: ParamValue<true> }, { page: ParamValue<false> }>,
     '/posts/': RouteRecordInfo<'/posts/', '/posts', Record<never, never>, Record<never, never>>,
-    '/posts/中文分类': RouteRecordInfo<'/posts/中文分类', '/posts/中文分类', Record<never, never>, Record<never, never>>,
-    '/posts/中文Post测试': RouteRecordInfo<'/posts/中文Post测试', '/posts/中文Post测试', Record<never, never>, Record<never, never>>,
     '/posts/about': RouteRecordInfo<'/posts/about', '/posts/about', Record<never, never>, Record<never, never>>,
     '/posts/aplayer': RouteRecordInfo<'/posts/aplayer', '/posts/aplayer', Record<never, never>, Record<never, never>>,
     '/posts/categories-a-b': RouteRecordInfo<'/posts/categories-a-b', '/posts/categories-a-b', Record<never, never>, Record<never, never>>,
@@ -86,6 +84,8 @@ declare module 'vue-router/auto-routes' {
     '/posts/test-images': RouteRecordInfo<'/posts/test-images', '/posts/test-images', Record<never, never>, Record<never, never>>,
     '/posts/test-tags': RouteRecordInfo<'/posts/test-tags', '/posts/test-tags', Record<never, never>, Record<never, never>>,
     '/posts/type-link-jump': RouteRecordInfo<'/posts/type-link-jump', '/posts/type-link-jump', Record<never, never>, Record<never, never>>,
+    '/posts/中文Post测试': RouteRecordInfo<'/posts/中文Post测试', '/posts/中文Post测试', Record<never, never>, Record<never, never>>,
+    '/posts/中文分类': RouteRecordInfo<'/posts/中文分类', '/posts/中文分类', Record<never, never>, Record<never, never>>,
     '/projects/': RouteRecordInfo<'/projects/', '/projects', Record<never, never>, Record<never, never>>,
     '/sponsors/': RouteRecordInfo<'/sponsors/', '/sponsors', Record<never, never>, Record<never, never>>,
     '/tags/': RouteRecordInfo<'/tags/', '/tags', Record<never, never>, Record<never, never>>,

demo/yun/App.vue

@@ -1,33 +1,9 @@
 <!-- You can mount anything here -->
 
 <script lang="ts" setup>
-// do script
-import { onMounted } from 'vue'
+import { useUtterances } from './composables/use-utterances'
 
-/**
- * mount utterances
- * @see https://utteranc.es/
- */
-function mountUtterances() {
-  const utterScript = document.createElement('script')
-
-  utterScript.src = 'https://utteranc.es/client.js'
-  utterScript.async = true
-  utterScript.crossOrigin = 'anonymous'
-
-  utterScript.setAttribute('repo', 'YunYouJun/valaxy')
-  utterScript.setAttribute('issue-term', 'pathname')
-  utterScript.setAttribute('label', 'utterances')
-  utterScript.setAttribute('theme', 'github-light')
-
-  const commentContainer = document.querySelector('.comment')
-  if (commentContainer)
-    commentContainer.appendChild(utterScript)
-}
-
-onMounted(() => {
-  mountUtterances()
-})
+useUtterances()
 </script>
 
 <template>

demo/yun/composables/use-utterances.ts

@@ -0,0 +1,48 @@
+import { useAppStore } from 'valaxy'
+import { onMounted, ref, watch } from 'vue'
+
+/**
+ * @see https://utteranc.es/
+ */
+export function useUtterances() {
+  const app = useAppStore()
+
+  const utterScriptRef = ref<HTMLScriptElement>()
+  /**
+   * mount utterances
+   * @see https://utteranc.es/
+   */
+  function createUtterancesScript() {
+    utterScriptRef.value = document.createElement('script')
+
+    utterScriptRef.value.src = 'https://utteranc.es/client.js'
+    utterScriptRef.value.async = true
+    utterScriptRef.value.crossOrigin = 'anonymous'
+
+    utterScriptRef.value.setAttribute('repo', 'YunYouJun/valaxy')
+    utterScriptRef.value.setAttribute('issue-term', 'pathname')
+    utterScriptRef.value.setAttribute('label', 'utterances')
+
+    utterScriptRef.value.setAttribute('theme', app.isDark ? 'github-dark' : 'github-light')
+
+    const commentContainer = document.querySelector('.comment')
+
+    if (commentContainer) {
+      // 如果旧元素存在，移除旧元素
+      const utterancesContainer = commentContainer.querySelector('.utterances')
+      if (utterancesContainer)
+        commentContainer.removeChild(utterancesContainer)
+
+      commentContainer.appendChild(utterScriptRef.value)
+    }
+  }
+
+  // watch dark mode for theme
+  watch(() => app.isDark, () => {
+    createUtterancesScript()
+  })
+
+  onMounted(() => {
+    createUtterancesScript()
+  })
+}