feat(comments) allow passing themes to Giscus

docs/features/comments.md

@@ -63,6 +63,15 @@ type Options = {
     category: string
     categoryId: string
 
+    // defaults to 'https://giscus.app'
+    themeUrl?: string
+
+    // defaults to 'light'
+    lightTheme?: string
+
+    // defaults to 'dark'
+    darkTheme?: string
+
     // how to map pages -> discussions
     // defaults to 'url'
     mapping?: "url" | "title" | "og:title" | "specific" | "number" | "pathname"

quartz/components/Comments.tsx

@@ -10,6 +10,9 @@ type Options = {
     repoId: string
     category: string
     categoryId: string
+    themeUrl?: string
+    lightTheme?: string
+    darkTheme?: string
     mapping?: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
     strict?: boolean
     reactionsEnabled?: boolean

quartz/components/scripts/comments.inline.ts

@@ -13,20 +13,45 @@ const changeTheme = (e: CustomEventMap["themechange"]) => {
     {
       giscus: {
         setConfig: {
-          theme: theme,
+          theme: getThemeName(theme),
         },
       },
     },
-    "https://giscus.app",
+    getThemeUrl(),
   )
 }
 
+const getThemeName = (theme: "light" | "dark") => {
+  const giscusContainer = document.querySelector(".giscus") as GiscusElement
+  if (!giscusContainer) {
+    return theme
+  }
+  const darkGiscus =
+    giscusContainer.dataset.darkTheme !== "" ? giscusContainer.dataset.darkTheme : "dark"
+  const lightGiscus =
+    giscusContainer.dataset.lightTheme !== "" ? giscusContainer.dataset.lightTheme : "light"
+  return theme === "dark" ? darkGiscus : lightGiscus
+}
+
+const getThemeUrl = () => {
+  const giscusContainer = document.querySelector(".giscus") as GiscusElement
+  if (!giscusContainer) {
+    return "https://giscus.app"
+  }
+  return giscusContainer.dataset.themeUrl !== ""
+    ? giscusContainer.dataset.themeUrl
+    : "https://giscus.app"
+}
+
 type GiscusElement = Omit<HTMLElement, "dataset"> & {
   dataset: DOMStringMap & {
     repo: `${string}/${string}`
     repoId: string
     category: string
     categoryId: string
+    themeUrl: string
+    lightTheme: string
+    darkTheme: string
     mapping: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
     strict: string
     reactionsEnabled: string