Fix Dark Mode Toggle (#174)

MudBlazor · Jan 21, 2025 · cb820bc · cb820bc
1 parent 73b5b80
commit cb820bc
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/src/TryMudBlazor.Client/Pages/Repl.razor.cs b/src/TryMudBlazor.Client/Pages/Repl.razor.cs
@@ -282,6 +282,9 @@ private async void UpdateTheme()
             await LayoutService.ToggleDarkMode();
             string theme = LayoutService.IsDarkMode ? "vs-dark" : "default";
             this.JsRuntime.InvokeVoid(Try.Editor.SetTheme, theme);
+            // LayoutService calls StateHasChanged, we need the updated <style> tags for updateIframeTheme to work
+            await Task.Yield();
+            await JsRuntime.InvokeVoidAsync("updateIframeTheme");
         }
     }
 }
diff --git a/src/TryMudBlazor.Client/wwwroot/index.html b/src/TryMudBlazor.Client/wwwroot/index.html
@@ -61,13 +61,25 @@
     <script src="_content/MudBlazor/MudBlazor.min.js?v=#{CACHE_TOKEN}#"></script>
     <script src="editor/main.js?v=#{CACHE_TOKEN}#"></script>
     <script type="text/javascript">
-        window.addEventListener('storage', (e) => {
-            if (e.key == "userPreferences") {
-                const mudblazorTheme = parent.document.getElementsByTagName('style')[4];
-                const iFrameTheme = document.getElementsByTagName('style')[3];
-                iFrameTheme.innerHTML = mudblazorTheme.innerHTML;
+        function updateIframeTheme() {
+            const mudblazorTheme = parent.document.querySelector('.mud-theme-provider') || parent.document.getElementsByTagName('style')[3];
+
+            if (mudblazorTheme) {
+                // Find the iframe
+                const userPageIframe = parent.document.getElementById('user-page-window');
+
+                if (userPageIframe && userPageIframe.contentDocument) {
+                    const iframeDoc = userPageIframe.contentDocument;
+                    const iFrameTheme = iframeDoc.querySelector('.mud-theme-provider') || iframeDoc.getElementsByTagName('style')[2];
+
+                    if (iFrameTheme) {
+                        iFrameTheme.innerHTML = mudblazorTheme.innerHTML;
+                    } 
+                } 
+            } else {
+                console.error('Could not find the parent theme element.');
             }
-        });
+        }
     </script>
 </body>