feat: dark mode toggle for the web UI

- CSS variables for dark theme: surface, text, borders, accents - Dark mode overrides for all hardcoded colors (buttons, tags, flashes, inputs, table headers, code blocks) - Toggle button (☀️/🌙) in navbar, saved to localStorage - Inline script applies saved theme before page render (no flash) - Applied to both base.html and public.html - System color-scheme meta tag for native browser chrome
2026-08-01 13:19:19 +00:00
parent 11d111fe83
commit b41c1ade44
3 changed files with 167 additions and 3 deletions
@@ -1,16 +1,26 @@
 <!doctype html>
-<html lang="{{ lang }}">
+<html lang="{{ lang }}" data-theme="light">
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex, nofollow">
+    <meta name="color-scheme" content="light dark">
    <title>{{ household.name }} — {{ t('Meal Tracker') }}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <script>
+        (function() {
+            var t = localStorage.getItem('mealtracker-theme');
+            if (t === 'dark') document.documentElement.setAttribute('data-theme', 'dark');
+        })();
+    </script>
 </head>
 <body class="public-page">
    <nav class="navbar">
        <span class="brand">🍽 {{ household.name }}</span>
-        <span class="nav-household">{{ viewing_date.isoformat() }}</span>
+        <div class="nav-right">
+            <button class="theme-toggle" id="theme-toggle" title="Toggle dark mode" aria-label="Toggle dark mode">☀️</button>
+            <span class="nav-household">{{ viewing_date.isoformat() }}</span>
+        </div>
    </nav>

    <main class="container">
@@ -73,5 +83,22 @@
           aria-label="{{ name }}">{{ code.upper() }}</a>
        {% endfor %}
    </footer>
+
+    <script>
+        (function() {
+            var btn = document.getElementById('theme-toggle');
+            var html = document.documentElement;
+            function setIcon() {
+                btn.textContent = html.getAttribute('data-theme') === 'dark' ? '🌙' : '☀️';
+            }
+            setIcon();
+            btn.addEventListener('click', function() {
+                var next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+                html.setAttribute('data-theme', next);
+                localStorage.setItem('mealtracker-theme', next);
+                setIcon();
+            });
+        })();
+    </script>
 </body>
 </html>