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,25 @@
 <!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="color-scheme" content="light dark">
    <title>{% block title %}{{ t('Meal Tracker') }}{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <script>
+        // Apply saved theme immediately to avoid flash
+        (function() {
+            var t = localStorage.getItem('mealtracker-theme');
+            if (t === 'dark') document.documentElement.setAttribute('data-theme', 'dark');
+        })();
+    </script>
 </head>
 <body>
    <nav class="navbar">
        <span class="brand">🍽 {{ t('Meal Tracker') }}</span>
        {% if session.user_id %}
        <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">{{ session.household_name }}</span>
            <span class="nav-user">{{ session.username }}{% if session.is_admin %} ({{ t('admin') }}){% endif %}</span>
            <a class="btn btn-sm" href="{{ url_for('auth.logout') }}">{{ t('Logout') }}</a>
@@ -39,5 +48,24 @@
           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>