Merge pull request #67 from mayur1377/fix-code-theme

fix: fix the code theme

Author: Mathys-Gasnier

src/components/CodePreview.tsx

@@ -1,25 +1,42 @@
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { oneDark, oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
 import CopyToClipboard from "./CopyToClipboard";
+import { useEffect, useState } from "react";
 
 type Props = {
   language: string;
   code: string[];
 };
 
 const CodePreview = ({ language = "markdown", code }: Props) => {
-  const codeString = code.join("\n");
+  const [theme, setTheme] = useState<"dark" | "light">("dark");
+
+  useEffect(() => {
+    const handleThemeChange = () => {
+      const newTheme = document.documentElement.getAttribute("data-theme") as "dark" | "light";
+      setTheme(newTheme || "dark");
+    };
+
+    handleThemeChange();
+    const observer = new MutationObserver(handleThemeChange);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
 
   return (
     <div className="code-preview">
-      <CopyToClipboard text={codeString} className="modal__copy" />
+      <CopyToClipboard text={code.join("\n")} className="modal__copy" />
       <SyntaxHighlighter
         language={language}
-        style={oneDark}
+        style={theme === "dark" ? oneDark : oneLight}
         wrapLines={true}
         customStyle={{ margin: "0", maxHeight: "20rem" }}
       >
-        {codeString}
+        {code.join("\n")}
       </SyntaxHighlighter>
     </div>
   );