feat: replace dark mode button with Material Design toggle switch

[emuehlstein]

Summary

Replaces the single-icon dark mode button (☀️) with a Material Design-style toggle switch using sun/moon icons.

Motivation

The current dark mode button uses a single emoji (☀️/🌙) that swaps on click. This has a UX ambiguity problem: does ☀️ mean "click for light mode" or "you're currently in light mode"? Users must click to find out.

Per Material Design 3 Switch guidelines, switches are the recommended component for binary settings because the toggle position visually communicates the current state. A pill-style toggle with sun/moon icons eliminates the ambiguity — the slider position shows which mode is active.

Changes

public/index.html — Replace <button> with <label> containing a hidden checkbox, track, thumb, and sun/moon icon spans. The id="darkModeToggle" is preserved on the outer label for backward compatibility with any external references.

public/style.css — Add .theme-toggle component styles: track, thumb, icons with CSS transitions. All colors use CSS variables (--border, --accent, --nav-text) per project theming conventions. No hardcoded hex values.

public/app.js — Listen on change event of the checkbox instead of click on the button. Includes fallback: if darkModeCheckbox element is missing (e.g., older cached HTML), the original button click handler still works.

Design Details

• Track: 46×24px rounded pill, uses --border color (unchecked) / --accent (checked)
• Thumb: 18px circle, slides 22px on toggle, uses --nav-text for contrast
• Icons: Sun (☀️) and Moon (🌙) at 10px, crossfade on toggle via opacity transition
• Transitions: 200ms ease on all moving parts
• Touch target: 44×44px minimum (per WCAG/M3 guidelines)
• Accessibility: aria-label="Toggle dark mode" on the label, checkbox is aria-hidden="true" (decorative, the label is the accessible element)

Testing

• npm test passes (596/596 on frontend helpers, 62/62 on packet-filter, 29/29 on aging). One pre-existing failure on bug: Packet Byte Breakdown — hop offsets and values don't match raw_hex (uses aggregated pathHops instead of per-observer path) #844 (byte breakdown hop count) — unrelated.
• No new logic paths that require unit tests (this is a CSS/HTML component swap with a trivial JS event listener change).
• Backward-compatible: if the checkbox element is missing, falls back to original button click handler.

Browser Validation

Tested on dev-scope.chicagooffline.com (Chromium). Toggle appears in nav bar, slides between sun/moon, persists theme to localStorage, respects existing meshcore-theme saved preference on page load.

No New Dependencies

Pure CSS + vanilla JS. No build step changes. No new npm packages.

[emuehlstein]

currently live at https://dev-scope.chicagooffline.com/

[Kpa-clawbot]

PR #893 Expert Review — Dark Mode Toggle Switch

PR: #893
Author: emuehlstein (external fork: emuehlstein/CoreScope-chicagooffline)
Reviewer: djb persona (security) + general code quality
Date: 2026-05-01

Verdict: ✅ APPROVE

Clean, well-scoped UI change. No security concerns. Minor accessibility nit below.

Security Review (External Fork — Extra Paranoia)

Check	Result
New dependencies (go.mod/package.json)	None
Credential/env/secret access	None
New HTTP outbound calls	None
File path manipulation	None
Subprocess/shell exec	None
New admin endpoints	None
License headers	N/A (no new files)
Supply chain risk	None — pure CSS/HTML/JS

Verdict: Zero security findings. This PR touches only presentation layer (CSS, HTML structure, one JS event listener swap). No attack surface introduced.

Code Quality

Must-fix: None

Non-blocking observations (not blocking merge):

1. Accessibility: aria-hidden="true" on the checkbox means screen readers can't interact with it directly. The <label> with aria-label partially compensates, but some AT tools may not activate the hidden input via label association. Consider removing aria-hidden or using role="switch" on the label. Low risk since the label click propagates to the checkbox.

2. Hardcoded fallback: var(--shadow, rgba(0,0,0,0.3)) introduces a hardcoded color fallback. Per project conventions, consider defining --shadow in :root. Cosmetic only.

3. stopPropagation: The darkToggle.addEventListener('click', (e) => { e.stopPropagation(); }) is defensive but could surprise future event delegation. Acceptable for now.

Summary

• 4 files changed (+83/-14)
• No new deps, no backend changes, no security surface
• Backward-compatible fallback for old HTML
• E2E test updated to handle both old and new DOM
• Well-documented PR description with M3 design rationale
• All existing tests pass per author

Recommendation: Merge as-is. Accessibility improvement can be a follow-up.