mirror of
https://github.com/ChuckBuilds/LEDMatrix.git
synced 2026-04-10 13:02:59 +00:00
3975940cff
* feat(web): add light/dark mode toggle and fix log readability Add a theme toggle button (moon/sun icon) to the header that switches between light and dark mode. Theme preference persists in localStorage and falls back to the OS prefers-color-scheme setting. The implementation uses a data-theme attribute on <html> with CSS overrides, so all 13 partial templates and 20+ widget JS files get dark mode support without any modifications — only 3 files changed. Also fixes log timestamp readability: text-gray-500 had ~3.5:1 contrast ratio against the dark log background, now uses text-gray-400 (~5.3:1) which passes WCAG AA in both light and dark mode. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix(web): address dark mode review — accessibility, robustness, and code quality - WCAG touch target: enforce 44×44px minimum on theme toggle button with display:inline-flex centering - Accessibility: add type="button", aria-pressed (dynamically updated), aria-hidden on decorative icons, and contextual aria-label/title that reflects current state ("Switch to light/dark mode") - Robustness: wrap all localStorage and matchMedia calls in try/catch with fallbacks for private browsing and restricted contexts; use addListener fallback for older browsers lacking addEventListener - Stylelint: convert all rgba() to modern rgb(…/…%) notation across both light and dark theme shadows and gradients - DRY: replace hardcoded hex values in dark mode utility overrides and component overrides with CSS variable references (--color-surface, --color-background, --color-border, --color-text-primary, etc.) - Remove redundant [data-theme="dark"] body rule (body already uses CSS variables that are redefined under the dark theme selector) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Chuck <chuck@example.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>