fix: popover surface — body-class bridge for portal scope, retune light/dark

MudBlazor popovers portal to <body>, outside the theme wrapper, so the dark token was unreachable. MainLayout now stamps deepdrft-theme-dark on <body>. Light: 8%->4% navy (near page background); dark: navy-mid + 20% green-accent (bluer).
2026-06-20 00:15:42 -04:00
parent 9300c794b4
commit b5106d090f
2 changed files with 31 additions and 9 deletions
@@ -46,6 +46,7 @@

    [Inject] public required PersistentComponentState PersistentState { get; set; }
    [Inject] public required DarkModeSettings DarkModeSettings { get; set; }
+    [Inject] public required IJSRuntime JS { get; set; }

    protected override void OnInitialized()
    {
@@ -66,6 +67,15 @@
        _persistingSubscription = PersistentState.RegisterOnPersisting(PersistDarkMode);
    }

+    // 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.
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await JS.InvokeVoidAsync("eval",
+            $"document.body.classList.toggle('deepdrft-theme-dark', {_isDarkMode.ToString().ToLower()})");
+    }
+
    // Theme wrapper class for CSS targeting
    private string ThemeWrapperClass => _isDarkMode ? "deepdrft-theme-dark" : "deepdrft-theme-light";