meshcore-analyzer

mirror of https://github.com/Kpa-clawbot/meshcore-analyzer.git synced 2026-06-04 01:21:19 +00:00

Files

T

Kpa-clawbot 9a2270168f feat(#893 ): Material Design dark mode toggle — polished version of #893 (#1389 )

## Polished version of #893

This PR carries forward @emuehlstein's Material Design dark-mode toggle
from #893, rebased onto current `master` and polished for a11y /
first-paint / forced-colors / cross-tab sync.

Original commits (preserved as `Co-authored-by`):
- `feat: replace dark mode button with Material Design toggle switch`
(emuehlstein)
- `fix: define --shadow CSS var in theme blocks, drop stopPropagation
no-op` (emuehlstein, addressing prior review)

#893 had been stuck in CONFLICTING state since 2026-05-24 with no CI
runs ever. Rebase resolved a single `public/style.css` `:root` conflict
(preserved both the `--text-primary`/`--bg-hover`/`--primary` aliases
from #1378 and the new `--shadow` definition).

## Polished improvements (on top of #893)

1. **FOUC fix** (`public/index.html`): inline `<head>` script reads
`localStorage('meshcore-theme')` (or `prefers-color-scheme`) and sets
`data-theme` *before* stylesheet load. Without this, dark-mode users see
a light-mode flash on every page load.
2. **ARIA semantics** (`public/index.html`): moved `aria-label` from the
wrapping `<label>` onto the actual `<input role="switch">`. Removed
`aria-hidden="true"` from the checkbox (which had been hiding it from
assistive tech). Added `aria-hidden` to the decorative track instead.
3. **Keyboard focus indicator** (`public/style.css`): `:focus-visible`
on the (visually-hidden) checkbox draws an outline on
`.theme-toggle-track`. Previously keyboard users could focus the toggle
with Tab but had no visible indicator.
4. **Reduced motion** (`public/style.css`): `@media
(prefers-reduced-motion: reduce)` disables the slide/fade transitions.
5. **Forced-colors mode** (`public/style.css`): explicit `CanvasText`
border on track + thumb so the switch stays visible in Windows High
Contrast. Default CSS tokens collapse to `Canvas`/`CanvasText` and the
thumb would otherwise disappear.
6. **Cross-tab sync** (`public/app.js`): `storage` event listener for
`meshcore-theme` mirrors the cb-presets pattern from #1378 — toggling
theme in one tab now syncs all open tabs.
7. **Tightened E2E test** (`test-e2e-playwright.js`): added assertions
for `role="switch"`, checkbox-state ↔ theme parity, and theme
persistence across a full page reload (was only asserting one toggle).

## Notes

- No `map[string]interface{}` (no Go changes).
- All colors via existing `--mc-*` / theme tokens; `--shadow` is defined
in both light + dark theme blocks.
- No layout shift (track is fixed `46x24` inside the `44x44` label
container).
- Branch scope is exactly the four files from #893: `public/app.js`,
`public/index.html`, `public/style.css`, `test-e2e-playwright.js`.

Closes #893.

Co-authored-by: Eric Muehlstein <muehlbucks@gmail.com>

---------

Co-authored-by: Eric Muehlstein <muehlbucks@gmail.com>
Co-authored-by: CoreScope Bot <bot@corescope>