Merge pull request #22 from hacxy/15-hacxy

perf: comment component distinguishes between dark theme and light theme
hacxy · Jan 9, 2025 · 32bf174 · 32bf174
2 parents a233284 + 8b86455
commit 32bf174
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/packages/docs/.vitepress/config.ts b/packages/docs/.vitepress/config.ts
@@ -19,7 +19,8 @@ export default defineConfigWithTheme<ThemeConfig>({
       reactionsEnabled: '1',
       inputPosition: 'bottom',
       lang: 'zh-CN',
-      theme: 'preferred_color_scheme'
+      darkTheme: 'catppuccin_macchiato',
+      lightTheme: 'catppuccin_latte'
     },
     logo: '/logo.png',
     search: {

diff --git a/packages/theme/src/components/Comment.vue b/packages/theme/src/components/Comment.vue
@@ -6,23 +6,39 @@ import { nextTick, onMounted, ref, watch } from 'vue';
 
 const show = ref(false);
 const route = useRoute();
-const { theme } = useData();
-
+const { theme, isDark } = useData();
+const commentTheme = ref();
 watch(route, () => {
   show.value = false;
   nextTick(() => {
     show.value = true;
   });
 });
+
+watch(isDark, () => {
+  if (isDark.value) {
+    commentTheme.value = theme.value.comment.darkTheme;
+  }
+  else {
+    commentTheme.value = theme.value.comment.lightTheme;
+  }
+});
 onMounted(() => {
   show.value = true;
+  if (isDark.value) {
+    commentTheme.value = theme.value.comment.darkTheme;
+  }
+  else {
+    commentTheme.value = theme.value.comment.lightTheme;
+  }
 });
 </script>
 
 <template>
   <div v-if="show && theme?.comment" class="VMComment">
     <Giscus
       v-bind="theme?.comment"
+      :theme="commentTheme"
     />
   </div>
 </template>

diff --git a/packages/theme/types/index.d.ts b/packages/theme/types/index.d.ts
@@ -1,11 +1,16 @@
-import type { GiscusProps } from '@giscus/vue';
+import type { GiscusProps, Theme as GiscusTheme } from '@giscus/vue';
 import type { DefaultTheme, Theme } from 'vitepress';
 import Layout from '../src/Layout.vue';
 
 export interface SidebarAutoMulti {
   [path: string]: 'auto'
 }
 
+export interface Comment extends Omit<GiscusProps, 'theme'> {
+  lightTheme: GiscusTheme
+  darkTheme: GiscusTheme
+}
+
 declare interface ThemeConfig extends Omit<DefaultTheme.Config, 'sidebar'> {
   /**
    * The sidebar items.
@@ -15,7 +20,7 @@ declare interface ThemeConfig extends Omit<DefaultTheme.Config, 'sidebar'> {
   /**
    * Giscus Comment
    */
-  comment?: GiscusProps
+  comment?: Comment
   // /**
   //  * Is the progress bar enabled
   //  * @default true