Merge pull request #820 from Abhi0049k/fix/775-comment-theme-sync

fix(Comment Section): Sync theme with site color mode

Author: sanjay-kv

src/components/blogCarousel/blogCard.tsx

@@ -37,34 +37,34 @@ const BlogCard = ({
       initial={{ opacity: 0, y: 40, scale: 0.95 }}
       animate={{ opacity: 1, y: 0, scale: 1 }}
       transition={{ duration: 0.6, ease: "easeOut" }}
-      whileHover={{ 
-        y: -8, 
+      whileHover={{
+        y: -8,
         scale: 1.02,
         transition: { duration: 0.4, ease: "easeOut" }
       }}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
       className="relative overflow-hidden h-full transition-all duration-300"
     >
-      <Link 
+      <Link
         to={`/blog/${id}`}
         className="block h-full text-decoration-none"
         style={{ textDecoration: 'none' }}
       >
         <div className="article-card h-full">
           {/* Category Badge */}
           <div className="card-category">{category}</div>
-          
+
           {/* Card Image */}
           <div className="card-image">
             <img src={imageUrl} alt={title} />
           </div>
-          
+
           {/* Card Content */}
           <div className="card-content">
             <h3 className="card-title">{title}</h3>
             <p className="card-description">{content}</p>
-            
+
             {/* Card Meta */}
             <div className="card-meta">
               <div className="card-author">
@@ -73,7 +73,7 @@ const BlogCard = ({
               </div>
               <span className="card-read-time">5 min read</span>
             </div>
-            
+
             {/* Read More Button */}
             <div className="card-read-more">
               Read Article →

src/components/discussions/DiscussionCard.tsx

@@ -123,7 +123,7 @@ export default function DiscussionCard({
               }}
             />
           ) : null}
-          <div 
+          <div
             className="author-avatar-fallback"
             style={{ display: discussion.author.avatar_url ? 'none' : 'flex' }}
           >

src/components/giscus.tsx

@@ -1,15 +1,92 @@
+// import React, { useEffect, useRef } from "react";
+
+// const GiscusComments: React.FC = () => {
+//   const ref = useRef<HTMLDivElement>(null);
+
+//   useEffect(() => {
+//     if (!ref.current) return;
+//     // Prevent duplicate script injection
+//     if (ref.current.querySelector("iframe")) return;
+
+//     const script = document.createElement("script");
+//     script.src = "https://giscus.app/client.js";
+//     script.setAttribute("data-repo", "recodehive/Support");
+//     script.setAttribute("data-repo-id", "R_kgDOL9urew");
+//     script.setAttribute("data-category", "General");
+//     script.setAttribute("data-category-id", "DIC_kwDOL9ure84Cqizj");
+//     script.setAttribute("data-mapping", "og:title");
+//     script.setAttribute("data-strict", "0");
+//     script.setAttribute("data-reactions-enabled", "1");
+//     script.setAttribute("data-emit-metadata", "0");
+//     script.setAttribute("data-input-position", "top");
+//     script.setAttribute("data-theme", "preferred_color_scheme");
+//     script.setAttribute("data-lang", "en");
+//     script.crossOrigin = "anonymous";
+//     script.async = true;
+//     ref.current.appendChild(script);
+//   }, []);
+
+//   return <div ref={ref} />;
+// };
+
+// export default GiscusComments;
+
+// import React, { useEffect, useRef } from "react";
+// import { useColorMode } from "@docusaurus/theme-common"
+
+// const GiscusComments: React.FC = () => {
+//   const ref = useRef<HTMLDivElement>(null);
+//   const { colorMode } = useColorMode();
+//   console.log(colorMode)
+//   useEffect(() => {
+//     if (!ref.current) return;
+//     // Prevent duplicate script injection
+//     if (ref.current.querySelector("iframe")) return;
+
+//     const script = document.createElement("script");
+//     script.src = "https://giscus.app/client.js";
+//     script.setAttribute("data-repo", "recodehive/Support");
+//     script.setAttribute("data-repo-id", "R_kgDOL9urew");
+//     script.setAttribute("data-category", "General");
+//     script.setAttribute("data-category-id", "DIC_kwDOL9ure84Cqizj");
+//     script.setAttribute("data-mapping", "og:title");
+//     script.setAttribute("data-strict", "0");
+//     script.setAttribute("data-reactions-enabled", "1");
+//     script.setAttribute("data-emit-metadata", "0");
+//     script.setAttribute("data-input-position", "top");
+
+//     // Set the default theme to "light"
+//     script.setAttribute("data-theme", colorMode);
+
+//     script.setAttribute("data-lang", "en");
+//     script.crossOrigin = "anonymous";
+//     script.async = true;
+//     ref.current.appendChild(script);
+//   }, [colorMode]);
+
+//   return <div ref={ref} />;
+// };
+
+// export default GiscusComments;
+
 import React, { useEffect, useRef } from "react";
+import { useColorMode } from "@docusaurus/theme-common";
 
 const GiscusComments: React.FC = () => {
   const ref = useRef<HTMLDivElement>(null);
+  const { colorMode } = useColorMode(); // colorMode is 'light' or 'dark'
 
+  // 1. This useEffect handles the initial script loading ONCE.
   useEffect(() => {
-    if (!ref.current) return;
-    // Prevent duplicate script injection
-    if (ref.current.querySelector("iframe")) return;
+    // Exit if the ref isn't set or if the script is already there
+    if (!ref.current || ref.current.hasChildNodes()) {
+      return;
+    }
 
     const script = document.createElement("script");
     script.src = "https://giscus.app/client.js";
+    script.async = true;
+    script.crossOrigin = "anonymous";
     script.setAttribute("data-repo", "recodehive/Support");
     script.setAttribute("data-repo-id", "R_kgDOL9urew");
     script.setAttribute("data-category", "General");
@@ -19,12 +96,30 @@ const GiscusComments: React.FC = () => {
     script.setAttribute("data-reactions-enabled", "1");
     script.setAttribute("data-emit-metadata", "0");
     script.setAttribute("data-input-position", "top");
-    script.setAttribute("data-theme", "preferred_color_scheme");
     script.setAttribute("data-lang", "en");
-    script.crossOrigin = "anonymous";
-    script.async = true;
+
+    // Use the initial colorMode from Docusaurus for the initial theme
+    script.setAttribute("data-theme", colorMode);
+
     ref.current.appendChild(script);
-  }, []);
+  }, []); // <-- Empty dependency array ensures this runs only once on mount.
+
+  // 2. This useEffect watches for changes in colorMode and sends a message to Giscus.
+  useEffect(() => {
+    const iframe = ref.current?.querySelector<HTMLIFrameElement>(
+      "iframe.giscus-frame"
+    );
+
+    if (!iframe) {
+      return;
+    }
+
+    // Send a message to the Giscus iframe to update its theme
+    iframe.contentWindow.postMessage(
+      { giscus: { setConfig: { theme: colorMode } } },
+      "https://giscus.app"
+    );
+  }, [colorMode]); // <-- This runs every time colorMode changes.
 
   return <div ref={ref} />;
 };