From 7fbb9a5431a4daf814d6dbeaebd92388d0b7cd82 Mon Sep 17 00:00:00 2001
From: Xin Wang <wangxin19930411@163.com>
Date: Wed, 17 Dec 2025 12:04:01 +0800
Subject: [PATCH] fix color theme change bug

---
 src/components/playground/Playground.tsx | 31 +++++++++++++++---------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/playground/Playground.tsx b/src/components/playground/Playground.tsx
index 49df031..c467e08 100644
--- a/src/components/playground/Playground.tsx
+++ b/src/components/playground/Playground.tsx
@@ -75,6 +75,7 @@ export default function Playground({
   const [rpcMethod, setRpcMethod] = useState("");
   const [rpcPayload, setRpcPayload] = useState("");
   const [showRpc, setShowRpc] = useState(false);
+  const [qrCodeUrl, setQrCodeUrl] = useState<string>("");
 
   // Clean up RPC resolvers before disconnecting to prevent errors
   const cleanupRpcResolvers = useCallback(() => {
@@ -406,17 +407,25 @@ export default function Playground({
   }, [agentVideoTrack, config, roomState]);
 
   useEffect(() => {
-    document.body.style.setProperty(
-      "--lk-theme-color",
-      // @ts-ignore
-      tailwindTheme.colors[config.settings.theme_color]["500"],
-    );
-    document.body.style.setProperty(
-      "--lk-drop-shadow",
-      `var(--lk-theme-color) 0px 0px 18px`,
-    );
+    if (typeof document !== "undefined") {
+      document.body.style.setProperty(
+        "--lk-theme-color",
+        // @ts-ignore
+        tailwindTheme.colors[config.settings.theme_color]["500"],
+      );
+      document.body.style.setProperty(
+        "--lk-drop-shadow",
+        `var(--lk-theme-color) 0px 0px 18px`,
+      );
+    }
   }, [config.settings.theme_color]);
 
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setQrCodeUrl(window.location.href);
+    }
+  }, []);
+
   const audioTileContent = useMemo(() => {
     const disconnectedContent = (
       <div className="flex flex-col items-center justify-center gap-2 text-gray-700 text-center w-full">
@@ -738,10 +747,10 @@ export default function Playground({
             <AudioInputTile trackRef={localMicTrack} />
           </ConfigurationPanelItem>
         )}
-        {config.show_qr && (
+        {config.show_qr && qrCodeUrl && (
           <div className="w-full">
             <ConfigurationPanelItem title="QR Code">
-              <QRCodeSVG value={window.location.href} width="128" />
+              <QRCodeSVG value={qrCodeUrl} width="128" />
             </ConfigurationPanelItem>
           </div>
         )}