From d2853f69190240297e2e37d68771939a60ec8ec5 Mon Sep 17 00:00:00 2001
From: Coki <92775570+HashCookie@users.noreply.github.com>
Date: Thu, 25 Jul 2024 12:09:38 +0800
Subject: [PATCH] fix: fix dark mode not updated bug (#251)

* feat: add iframe key to refresh content based on color mode

* refactor: optimize iframe key management in editor component
---
 src/pages/editor.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/pages/editor.js b/src/pages/editor.js
index 411d8f4..ae5b2e3 100644
--- a/src/pages/editor.js
+++ b/src/pages/editor.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 import Layout from "@theme/Layout";
 import Giscus from "@giscus/react";
 import {useColorMode} from "@docusaurus/theme-common";
@@ -8,11 +8,17 @@ function EditorContent() {
   const {colorMode} = useColorMode();
   const {i18n} = useDocusaurusContext();
   const currentLanguage = i18n.currentLocale;
+  const [editorUrl, setEditorUrl] = useState("");
+
+  useEffect(() => {
+    setEditorUrl(`https://editor.casbin.org/?theme=${colorMode}&lang=${currentLanguage}`);
+  }, [colorMode, currentLanguage]);
+
   return (
     <>
       <div className="editor-container">
         <iframe
-          src={`https://editor.casbin.org/?theme=${colorMode}&lang=${currentLanguage}`}
+          src={editorUrl}
           className="editor-iframe"
           title="Casbin-editor"
         />