diff --git a/docs/features/comments.md b/docs/features/comments.md
index 13faffbfd..92f2fc515 100644
--- a/docs/features/comments.md
+++ b/docs/features/comments.md
@@ -63,7 +63,7 @@ type Options = {
     category: string
     categoryId: string
 
-    // defaults to 'https://giscus.app'
+    // defaults to 'https://giscus.app/themes'
     themeUrl?: string
 
     // defaults to 'light'
diff --git a/quartz/components/Comments.tsx b/quartz/components/Comments.tsx
index 4004d7c7e..053d93c60 100644
--- a/quartz/components/Comments.tsx
+++ b/quartz/components/Comments.tsx
@@ -37,6 +37,9 @@ export default ((opts: Options) => {
         data-strict={boolToStringBool(opts.options.strict ?? true)}
         data-reactions-enabled={boolToStringBool(opts.options.reactionsEnabled ?? true)}
         data-input-position={opts.options.inputPosition ?? "bottom"}
+        data-light-theme={opts.options.lightTheme ?? "light"}
+        data-dark-theme={opts.options.darkTheme ?? "dark"}
+        data-theme-url={opts.options.themeUrl ?? "https://giscus.app/themes"}
       ></div>
     )
   }
diff --git a/quartz/components/scripts/comments.inline.ts b/quartz/components/scripts/comments.inline.ts
index e2f7dc033..0649e41f6 100644
--- a/quartz/components/scripts/comments.inline.ts
+++ b/quartz/components/scripts/comments.inline.ts
@@ -17,11 +17,14 @@ const changeTheme = (e: CustomEventMap["themechange"]) => {
         },
       },
     },
-    getThemeUrl(),
+    getThemeUrl(getThemeName(theme)),
   )
 }
 
-const getThemeName = (theme: "light" | "dark") => {
+const getThemeName = (theme: string) => {
+  if (theme !== "dark" && theme !== "light") {
+    return theme
+  }
   const giscusContainer = document.querySelector(".giscus") as GiscusElement
   if (!giscusContainer) {
     return theme
@@ -31,12 +34,12 @@ const getThemeName = (theme: "light" | "dark") => {
   return theme === "dark" ? darkGiscus : lightGiscus
 }
 
-const getThemeUrl = () => {
+const getThemeUrl = (theme: string) => {
   const giscusContainer = document.querySelector(".giscus") as GiscusElement
   if (!giscusContainer) {
-    return "https://giscus.app"
+    return `https://giscus.app/themes/${theme}.css`
   }
-  return giscusContainer.dataset.themeUrl ?? "https://giscus.app"
+  return `${giscusContainer.dataset.themeUrl ?? "https://giscus.app/themes"}/${theme}.css`
 }
 
 type GiscusElement = Omit<HTMLElement, "dataset"> & {
@@ -78,7 +81,7 @@ document.addEventListener("nav", () => {
 
   const theme = document.documentElement.getAttribute("saved-theme")
   if (theme) {
-    giscusScript.setAttribute("data-theme", theme)
+    giscusScript.setAttribute("data-theme", getThemeName(theme))
   }
 
   giscusContainer.appendChild(giscusScript)