From d3d6eee2200ca994b9aed5132f9715ec7869a2e1 Mon Sep 17 00:00:00 2001
From: saberzero1 <github@emilebangma.com>
Date: Thu, 17 Oct 2024 19:01:24 +0200
Subject: [PATCH] Updated docs with example

---
 docs/features/comments.md | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/docs/features/comments.md b/docs/features/comments.md
index 92f2fc515..933fc8a81 100644
--- a/docs/features/comments.md
+++ b/docs/features/comments.md
@@ -63,12 +63,15 @@ type Options = {
     category: string
     categoryId: string
 
+    // Url to folder with custom themes
     // defaults to 'https://giscus.app/themes'
     themeUrl?: string
 
+    // filename for light theme .css file
     // defaults to 'light'
     lightTheme?: string
 
+    // filename for dark theme .css file
     // defaults to 'dark'
     darkTheme?: string
 
@@ -90,3 +93,24 @@ type Options = {
   }
 }
 ```
+
+#### Custom CSS theme
+
+Quartz supports custom theme for Giscus. To use a custom CSS theme, place the `.css` file inside the `quartz/static` folder and set the configuration values.
+
+For example, if you have a light theme `light-theme.css`, a dark theme `dark-theme.css`, and your Quartz site is hosted at `https://example.com/`:
+
+```ts
+afterBody: [
+  Component.Comments({
+    provider: 'giscus',
+    options: {
+      // Other options
+
+      themeUrl: "https://example.com/static", // corresponds to quartz/static/
+      lightTheme: "light-theme", // corresponds to light-theme.css in quartz/static/
+      darkTheme: "dark-theme", // corresponds to dark-theme.css quartz/static/
+    }
+  }),
+],
+```