rick/LEDMatrix
1
0
Fork 0
mirror of https://github.com/ChuckBuilds/LEDMatrix.git synced 2026-04-10 13:02:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add light/dark mode toggle and fix log readability (#243)

Browse Source 
* 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>
This commit is contained in:
Chuck
2026-02-12 21:12:37 -05:00
committed by GitHub
parent 158e07c82b
commit 3975940cff
3 changed files with 308 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
web_interface/templates/v3/base.html
View File

@@ -5,6 +5,86 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LED Matrix Control Panel - v3</title>
<!-- Theme initialization (must run before CSS to prevent flash) -->
<script>
(function() {
// Safely read from localStorage (may throw in private browsing / restricted contexts)
function getStorage(key) {
try { return localStorage.getItem(key); } catch (e) { return null; }
}
function setStorage(key, value) {
try { localStorage.setItem(key, value); } catch (e) { /* no-op */ }
}
// Safely query prefers-color-scheme (matchMedia may be unavailable)
function prefersDark() {
try {
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
} catch (e) { return false; }
}
var saved = getStorage('theme');
var theme = saved || (prefersDark() ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', theme);
// Theme toggle function
window.toggleTheme = function() {
try {
var current = document.documentElement.getAttribute('data-theme');
var next = current === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', next);
setStorage('theme', next);
window.updateThemeIcon(next);
} catch (e) { /* no-op */ }
};
// Update icon visibility and ARIA state based on current theme
window.updateThemeIcon = function(theme) {
var darkIcon = document.getElementById('theme-icon-dark');
var lightIcon = document.getElementById('theme-icon-light');
var btn = document.getElementById('theme-toggle');
if (darkIcon && lightIcon) {
if (theme === 'dark') {
darkIcon.classList.add('hidden');
lightIcon.classList.remove('hidden');
} else {
darkIcon.classList.remove('hidden');
lightIcon.classList.add('hidden');
}
}
if (btn) {
var isDark = theme === 'dark';
btn.setAttribute('aria-pressed', String(isDark));
var label = isDark ? 'Switch to light mode' : 'Switch to dark mode';
btn.setAttribute('aria-label', label);
btn.setAttribute('title', label);
}
};
// Initialize icon state once DOM is ready
document.addEventListener('DOMContentLoaded', function() {
window.updateThemeIcon(document.documentElement.getAttribute('data-theme') || 'light');
});
// Listen for OS theme changes (only when no explicit user preference)
try {
var mql = window.matchMedia('(prefers-color-scheme: dark)');
var handler = function(e) {
if (!getStorage('theme')) {
var t = e.matches ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', t);
window.updateThemeIcon(t);
}
};
if (mql.addEventListener) {
mql.addEventListener('change', handler);
} else if (mql.addListener) {
mql.addListener(handler);
}
} catch (e) { /* matchMedia unavailable */ }
})();
</script>
<!-- Resource hints for CDN resources -->
<link rel="preconnect" href="https://unpkg.com" crossorigin>
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
@@ -1309,8 +1389,20 @@
</h1>
</div>
<!-- Connection status -->
<!-- Connection status and theme toggle -->
<div class="flex items-center space-x-4">
<!-- Theme toggle -->
<button id="theme-toggle"
type="button"
onclick="toggleTheme()"
class="theme-toggle-btn p-2 rounded-md"
title="Switch to dark mode"
aria-label="Switch to dark mode"
aria-pressed="false">
<i class="fas fa-moon" id="theme-icon-dark" aria-hidden="true"></i>
<i class="fas fa-sun hidden" id="theme-icon-light" aria-hidden="true"></i>
</button>
<div id="connection-status" class="flex items-center space-x-2 text-sm">
<div class="w-2 h-2 bg-red-500 rounded-full"></div>
<span class="text-gray-600">Disconnected</span>