Rework theme listening

Author: ScarletKuro

src/TryMudBlazor.Client/Models/TryConstants.cs

@@ -6,6 +6,8 @@ public static class Try
         public const string ChangeDisplayUrl = "Try.changeDisplayUrl";
         public const string ReloadIframe = "Try.reloadIframe";
         public const string Dispose = "Try.dispose";
+        public const string RegisterThemeListener = "Try.registerThemeListener";
+        public const string UnregisterThemeListener = "Try.unregisterThemeListener";
         public static class Editor
         {
             public const string Create = "Try.Editor.create";

src/TryMudBlazor.Client/Pages/Repl.razor.cs

@@ -285,9 +285,7 @@ private async Task UpdateTheme()
             await LayoutService.ToggleDarkMode();
             string theme = LayoutService.IsDarkMode ? "vs-dark" : "default";
             await JsRuntime.InvokeVoidAsync(Try.Editor.SetTheme, theme);
-            // LayoutService calls StateHasChanged, we need the updated <style> tags for updateIframeTheme to work
-            await Task.Yield();
-            await JsRuntime.InvokeVoidAsync("updateIframeTheme");
+            // The iframe's EmptyLayout listens for the localStorage storage event and updates itself.
         }
 
         private void ClearCache()

src/TryMudBlazor.Client/Shared/EmptyLayout.razor

@@ -1,5 +1,8 @@
-@using TryMudBlazor.Client.Services
+@using Microsoft.JSInterop
+@using TryMudBlazor.Client.Services
+@using TryMudBlazor.Client.Models
 @inherits LayoutComponentBase
+@implements IAsyncDisposable
 
 <MudThemeProvider IsDarkMode="@LayoutService.IsDarkMode" />
 <MudPopoverProvider />
@@ -12,10 +15,36 @@
 
 @code {
 	[Inject] private LayoutService LayoutService { get; set; }
+	[Inject] private IJSRuntime JSRuntime { get; set; }
+
+	private DotNetObjectReference<EmptyLayout> _dotNetRef;
 
 	protected override async Task OnInitializedAsync()
 	{
 		await LayoutService.ApplyUserPreferences(false);
 		await base.OnInitializedAsync();
 	}
-}
+
+	protected override async Task OnAfterRenderAsync(bool firstRender)
+	{
+		if (firstRender)
+		{
+			_dotNetRef = DotNetObjectReference.Create(this);
+			await JSRuntime.InvokeVoidAsync(Try.RegisterThemeListener, _dotNetRef);
+		}
+		await base.OnAfterRenderAsync(firstRender);
+	}
+
+	[JSInvokable]
+	public async Task RefreshTheme()
+	{
+		await LayoutService.ApplyUserPreferences(false);
+		StateHasChanged();
+	}
+
+	public async ValueTask DisposeAsync()
+	{
+		await JSRuntime.InvokeVoidAsync(Try.UnregisterThemeListener);
+		_dotNetRef?.Dispose();
+	}
+}

src/TryMudBlazor.Client/wwwroot/editor/main.js

@@ -101,6 +101,20 @@ window.Try = {
     dispose: function () {
         _dotNetInstance = null;
         window.removeEventListener('keydown', onKeyDown);
+    },
+    registerThemeListener: function (dotNetRef) {
+        this._themeListener = function (e) {
+            if (e.key === 'userPreferences') {
+                dotNetRef.invokeMethodAsync('RefreshTheme');
+            }
+        };
+        window.addEventListener('storage', this._themeListener);
+    },
+    unregisterThemeListener: function () {
+        if (this._themeListener) {
+            window.removeEventListener('storage', this._themeListener);
+            delete this._themeListener;
+        }
     }
 }
 

src/TryMudBlazor.Client/wwwroot/index.html

@@ -91,25 +91,6 @@
             }
         }).catch(error => console.error(error));
 
-        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>