feat(centralui): dark-mode toggle + localStorage persistence + SSR pre-hydration (T34b)

2026-06-18 20:09:00 -04:00
parent 0449c473c1
commit fef4d4cf83
5 changed files with 189 additions and 0 deletions
@@ -8,6 +8,10 @@
        <NavMenu />
    </Nav>
    <RailFooter>
+        @* T34b: dark-mode toggle sits in the rail footer alongside the session
+           block. It is auth-agnostic (pure client-side theme) so it renders even
+           on the login page. *@
+        <DarkModeToggle />
        <AuthorizeView>
            <Authorized>
                @* CentralUI-024: claim type resolved via JwtTokenService. *@
@@ -0,0 +1,54 @@
+@inject IJSRuntime JS
+
+@* T34b: dark-mode toggle. Pure JS-interop + localStorage — no DI service and no
+   server state. The actual theme switch happens in the browser via window.sbTheme
+   (wwwroot/js/theme.js); this button just drives toggle() and reflects the result.
+   The page-load default (no-flash) is owned by the inline pre-hydration script in
+   App.razor, not here. *@
+<button type="button"
+        class="rail-btn sb-theme-toggle"
+        aria-label="Toggle dark mode"
+        aria-pressed="@(_isDark ? "true" : "false")"
+        title="@(_isDark ? "Switch to light mode" : "Switch to dark mode")"
+        @onclick="ToggleAsync">
+    <i class="bi @(_isDark ? "bi-sun" : "bi-moon-stars")" aria-hidden="true"></i>
+</button>
+
+@code {
+    /// <summary>Mirrors the browser's current theme so the glyph + aria-pressed stay in sync.</summary>
+    private bool _isDark;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!firstRender) return;
+
+        // Reflect the persisted theme once the circuit is interactive. Prerender
+        // has no JS runtime, so guard the call; a disconnect/blip just leaves the
+        // button on its default (light) glyph until the next render.
+        try
+        {
+            var mode = await JS.InvokeAsync<string>("sbTheme.get");
+            var isDark = mode == "dark";
+            if (isDark != _isDark)
+            {
+                _isDark = isDark;
+                StateHasChanged();
+            }
+        }
+        catch (JSException) { }
+        catch (JSDisconnectedException) { }
+        catch (InvalidOperationException) { }
+    }
+
+    private async Task ToggleAsync()
+    {
+        try
+        {
+            var mode = await JS.InvokeAsync<string>("sbTheme.toggle");
+            _isDark = mode == "dark";
+        }
+        catch (JSException) { }
+        catch (JSDisconnectedException) { }
+        catch (InvalidOperationException) { }
+    }
+}