Enable dark mode HTML graph

Author: Mersoltane

website/src/theme/Root.js

@@ -0,0 +1,55 @@
+import React, { useEffect } from 'react';
+import { useColorMode } from '@docusaurus/theme-common';
+
+export default function Root({ children }) {
+  const { colorMode } = useColorMode();
+
+  useEffect(() => {
+    // Function to send theme to all iframes
+    const sendThemeToIframes = () => {
+      const iframes = document.querySelectorAll('iframe');
+      iframes.forEach((iframe) => {
+        try {
+          iframe.contentWindow.postMessage(
+            {
+              type: 'themeChange',
+              theme: colorMode,
+            },
+            '*'
+          );
+        } catch (e) {
+          // Ignore errors
+        }
+      });
+    };
+
+    // Send theme when it changes
+    sendThemeToIframes();
+
+    // Also send theme on a slight delay to catch lazy-loaded iframes
+    const timer = setTimeout(sendThemeToIframes, 100);
+
+    // Listen for theme requests from iframes
+    const handleMessage = (event) => {
+      if (event.data && event.data.type === 'requestTheme') {
+        event.source.postMessage(
+          {
+            type: 'themeChange',
+            theme: colorMode,
+          },
+          '*'
+        );
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener('message', handleMessage);
+    };
+  }, [colorMode]);
+
+  return <>{children}</>;
+}
+

website/static/img/cart_pole_graph.html

@@ -260,15 +260,43 @@ <h1></h1>
                 }
             }
 
+            // Message handler for cross-origin theme communication
+            let parentTheme = null;
+            
+            window.addEventListener('message', (event) => {
+                // Accept messages from any origin (parent page)
+                if (event.data && event.data.type === 'themeChange') {
+                    const isDark = event.data.theme === 'dark';
+                    parentTheme = event.data.theme;
+                    
+                    if (!manualThemeSet) {
+                        updateThemeUI(isDark);
+                        currentTheme = isDark ? 'dark' : 'light';
+                        updateNodeColors(isDark);
+                    }
+                }
+            });
+            
             function checkDarkMode() {
                 // If user manually set theme, use that
                 if (manualThemeSet) {
                     const storedTheme = localStorage.getItem('vis-theme');
                     return storedTheme === 'dark';
                 }
 
+                // If in iframe and we received theme from parent via postMessage
+                if (isInIframe && parentTheme) {
+                    const isDark = parentTheme === 'dark';
+                    updateThemeUI(isDark);
+                    if (currentTheme !== parentTheme && typeof network !== 'undefined' && network !== null) {
+                        currentTheme = parentTheme;
+                        updateNodeColors(isDark);
+                    }
+                    return isDark;
+                }
+                
                 try {
-                    // Check parent window's theme (when embedded in iframe)
+                    // Try to check parent window's theme (works in same-origin only)
                     if (isInIframe && window.parent && window.parent.document) {
                         const isDark = window.parent.document.documentElement.getAttribute('data-theme') === 'dark';
                         const newTheme = isDark ? 'dark' : 'light';
@@ -285,7 +313,7 @@ <h1></h1>
                         return isDark;
                     }
                 } catch (e) {
-                    // Cross-origin or error
+                    // Cross-origin error - wait for postMessage instead
                 }
 
                 // Standalone mode: check URL parameter first
@@ -311,6 +339,11 @@ <h1></h1>
                 updateThemeUI(prefersDark);
                 return prefersDark;
             }
+            
+            // Request initial theme from parent
+            if (isInIframe) {
+                window.parent.postMessage({ type: 'requestTheme' }, '*');
+            }
 
             // Function to toggle theme manually
             function toggleTheme() {
@@ -360,16 +393,16 @@ <h1></h1>
             const initialDark = checkDarkMode();
             currentTheme = initialDark ? 'dark' : 'light';
 
-            // Listen for theme changes in parent (only if in iframe and not manually set)
+            // For same-origin iframes, poll occasionally as backup
             if (isInIframe) {
                 setInterval(() => {
-                    if (!manualThemeSet) {
+                    if (!manualThemeSet && !parentTheme) {
                         checkDarkMode();
                     }
-                }, 100);
+                }, 500); // Less frequent polling as backup
             }
 
-            // Also listen to system preference changes
+            // Also listen to system preference changes (for standalone mode)
             window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
                 if (!manualThemeSet && !isInIframe) {
                     const isDark = e.matches;