dohertj2/ScadaBridge
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Joseph Doherty
2026-06-18 20:09:00 -04:00
parent 0449c473c1
commit fef4d4cf83
5 changed files with 189 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Layout/MainLayout.razor
+4
View File
@@ -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. *@
src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Shared/DarkModeToggle.razor
+54
View File
@@ -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) { }
}
}
src/ZB.MOM.WW.ScadaBridge.CentralUI/wwwroot/js/theme.js
+32
View File
@@ -0,0 +1,32 @@
// Dark-mode theme helper (T34b). Plain browser global in the treeview-storage.js
// style (no ES-module export) so the App.razor <head> pre-hydration inline
// script and this file agree on one localStorage key and one apply rule.
//
// * get() — reads the persisted choice ('dark' only when explicitly stored;
// anything else is 'light').
// * apply() — sets data-bs-theme on <html>; the site.css [data-bs-theme="dark"]
// token-override block (T34a) does the rest, side-rail included.
// * set() — persists + applies, returns the mode.
// * toggle() — flips and persists, returns the new mode (the DarkModeToggle
// component's click path).
//
// Every localStorage touch is wrapped in try/catch so private-browsing modes
// (which throw on access) degrade to light rather than break the page.
window.sbTheme = {
KEY: 'sb-theme',
get() {
try { return localStorage.getItem(this.KEY) === 'dark' ? 'dark' : 'light'; }
catch { return 'light'; }
},
apply(mode) {
document.documentElement.setAttribute('data-bs-theme', mode);
},
set(mode) {
try { localStorage.setItem(this.KEY, mode); } catch { }
this.apply(mode);
return mode;
},
toggle() {
return this.set(this.get() === 'dark' ? 'light' : 'dark');
}
};
src/ZB.MOM.WW.ScadaBridge.Host/Components/App.razor
+14
View File
@@ -10,6 +10,19 @@
<ThemeHead />
<link href="/ZB.MOM.WW.ScadaBridge.Host.styles.css" rel="stylesheet" />
<link href="_content/ZB.MOM.WW.ScadaBridge.CentralUI/css/site.css" rel="stylesheet" />
<script>
// T34b: apply the persisted theme to <html> BEFORE first paint so a
// dark-mode user never sees a light flash. Mirrors window.sbTheme.get/apply
// (theme.js) — same key, same rule — but inlined so it runs without waiting
// on the deferred script include. localStorage access is guarded for
// private-browsing modes that throw on read.
(function () {
try {
var m = localStorage.getItem('sb-theme') === 'dark' ? 'dark' : 'light';
document.documentElement.setAttribute('data-bs-theme', m);
} catch (e) { }
})();
</script>
<HeadOutlet @rendermode="InteractiveServer" />
</head>
<body>
@@ -78,6 +91,7 @@
</script>
<script src="/js/treeview-storage.js"></script>
<ThemeScripts />
<script src="_content/ZB.MOM.WW.ScadaBridge.CentralUI/js/theme.js"></script>
<script src="_content/ZB.MOM.WW.ScadaBridge.CentralUI/js/monaco-init.js"></script>
<script src="_content/ZB.MOM.WW.ScadaBridge.CentralUI/js/audit-grid.js"></script>
<script src="_content/ZB.MOM.WW.ScadaBridge.CentralUI/js/transport.js"></script>
tests/ZB.MOM.WW.ScadaBridge.CentralUI.Tests/Shared/DarkModeToggleTests.cs
+85
View File
@@ -0,0 +1,85 @@
using Bunit;
using ZB.MOM.WW.ScadaBridge.CentralUI.Components.Shared;
namespace ZB.MOM.WW.ScadaBridge.CentralUI.Tests.Shared;
/// <summary>
/// Tests for T34b's <see cref="DarkModeToggle"/>. The component is pure
/// JS-interop over <c>window.sbTheme</c> (theme.js): <c>sbTheme.get</c> reflects
/// the persisted theme on first render and <c>sbTheme.toggle</c> flips it on
/// click. The toggle carries the required a11y attributes
/// (<c>aria-label="Toggle dark mode"</c> + <c>aria-pressed</c>).
/// </summary>
public class DarkModeToggleTests : BunitContext
{
public DarkModeToggleTests()
{
// Loose mode: unconfigured interop returns default. We configure the two
// calls the component actually makes (get on first render, toggle on click).
JSInterop.Mode = JSRuntimeMode.Loose;
}
[Fact]
public void Renders_Button_WithToggleDarkModeAriaLabel()
{
JSInterop.Setup<string>("sbTheme.get").SetResult("light");
var cut = Render<DarkModeToggle>();
var button = cut.Find("button[aria-label='Toggle dark mode']");
Assert.NotNull(button);
}
[Fact]
public void OnFirstRender_PersistedLight_AriaPressedFalse()
{
// sbTheme.get returns light → button reflects light (aria-pressed=false,
// moon glyph offering "switch to dark").
JSInterop.Setup<string>("sbTheme.get").SetResult("light");
var cut = Render<DarkModeToggle>();
var button = cut.Find("button.sb-theme-toggle");
Assert.Equal("false", button.GetAttribute("aria-pressed"));
Assert.NotNull(cut.Find("i.bi-moon-stars"));
}
[Fact]
public void OnFirstRender_PersistedDark_AriaPressedTrue()
{
// sbTheme.get returns dark → button reflects dark (aria-pressed=true,
// sun glyph offering "switch to light").
JSInterop.Setup<string>("sbTheme.get").SetResult("dark");
var cut = Render<DarkModeToggle>();
cut.WaitForAssertion(() =>
{
var button = cut.Find("button.sb-theme-toggle");
Assert.Equal("true", button.GetAttribute("aria-pressed"));
Assert.NotNull(cut.Find("i.bi-sun"));
});
}
[Fact]
public void Click_InvokesToggle_AndReflectsNewState()
{
// Start persisted-light; toggling returns "dark". The click handler must
// invoke sbTheme.toggle and flip aria-pressed/glyph to the dark state.
JSInterop.Setup<string>("sbTheme.get").SetResult("light");
var toggle = JSInterop.Setup<string>("sbTheme.toggle").SetResult("dark");
var cut = Render<DarkModeToggle>();
cut.Find("button.sb-theme-toggle").Click();
cut.WaitForAssertion(() =>
{
// The handler invoked sbTheme.toggle.
Assert.Single(toggle.Invocations);
var button = cut.Find("button.sb-theme-toggle");
Assert.Equal("true", button.GetAttribute("aria-pressed"));
Assert.NotNull(cut.Find("i.bi-sun"));
});
}
}