fix: gate OnAfterRenderAsync body-class JS call; hoist dark popover token

Only stamps body class on firstRender or _isDarkMode change; adds base call. Hoists duplicate dark popover mix value to --deepdrft-popover-surface-dark in :root; both .deepdrft-theme-dark and body.deepdrft-theme-dark reference it via var().
2026-06-20 00:21:53 -04:00
parent b5106d090f
commit 30999b038c
2 changed files with 22 additions and 12 deletions
@@ -42,6 +42,7 @@
    private string _audioPlayerClass = "minimized";
    private const string DarkModeKey = "darkMode";
    private bool _isDarkMode = false;
+    private bool? _lastAppliedDarkMode = null;
    private PersistingComponentStateSubscription _persistingSubscription;

    [Inject] public required PersistentComponentState PersistentState { get; set; }
@@ -70,10 +71,18 @@
    // Sync dark mode class on <body> so portaled MudBlazor elements (popovers, menus, selects)
    // inherit --deepdrft-popover-surface from body.deepdrft-theme-dark rather than from :root only.
    // Popovers portal outside the ThemeWrapperClass div, so only a body-level class can reach them.
+    // Gated: only fires on first render or when _isDarkMode actually changes, to avoid redundant
+    // JS calls on unrelated re-renders (e.g. audio player minimize/expand).
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
-        await JS.InvokeVoidAsync("eval",
-            $"document.body.classList.toggle('deepdrft-theme-dark', {_isDarkMode.ToString().ToLower()})");
+        await base.OnAfterRenderAsync(firstRender);
+
+        if (firstRender || _isDarkMode != _lastAppliedDarkMode)
+        {
+            _lastAppliedDarkMode = _isDarkMode;
+            await JS.InvokeVoidAsync("eval",
+                $"document.body.classList.toggle('deepdrft-theme-dark', {_isDarkMode.ToString().ToLower()})");
+        }
    }

    // Theme wrapper class for CSS targeting