anti/DECNET
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(decnet_web/Layout): topbar dark/light toggle with circular reveal

Browse Source 
User-facing theme toggle ships now that the design system has
been audited end-to-end. A Sun/Moon button lives between the
threat indicator and the SYSTEM status pill in the topbar — same
slim 28x28 voice as the rest of the topbar controls, no chrome
shouting at the user.

Click coords drive a View Transitions API circle clip-path that
grows from the cursor to the farthest viewport corner over 520ms
with the project's standard --ease curve. Browsers without
startViewTransition (older Firefox, Safari < 18) fall through to
an unanimated swap — the hook returns instantly in that case.

Persistence is two-tier:
 - localStorage decnet_theme — the user's saved preference, the
   thing the topbar toggle writes. Survives reloads, applies
   everywhere.
 - sessionStorage decnet_theme_lab — dev-mode lab override (Task
   3). Tab-scoped, wins on boot so devs can A/B without nuking
   the saved preference.

App.tsx hydrates both on first mount in the right order so the
correct theme is on <html> before the first paint.

useThemeToggle is a small hook in lib/ rather than a Layout-only
helper so the same toggle can be reused later from a settings page
or hotkey.
This commit is contained in:
anti
2026-05-09 04:01:24 -04:00
parent 9cab37db3a
commit 438a6e3e45
7 changed files with 262 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
decnet_web/src/components/Layout.css
View File

@@ -212,6 +212,29 @@
flex-shrink: 0;
}
/* Dark/light toggle in topbar.
* Sits between the threat indicator and the system status pill,
* matching the slim/quiet voice of the rest of the topbar. */
.theme-toggle-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
background: transparent;
border: 1px solid var(--border);
color: var(--accent);
cursor: pointer;
transition: border-color var(--dur-quick) var(--ease),
color var(--dur-quick) var(--ease),
background var(--dur-quick) var(--ease);
}
.theme-toggle-btn:hover {
background: var(--accent-tint-10);
border-color: var(--accent);
}
.crumbs {
display: flex;
align-items: center;