Add light/dark mode toggle for the UI

The UI stylesheet already centralized its palette in a :root block, so this
mostly meant (1) migrating the ~30 colors still hardcoded in rules into
variables so they flip in one place, and (2) adding a [data-theme="dark"]
override palette. Artifact rendering is untouched — those use the separate
static/themes/*.css and the preview backdrop stays white by design, since
artifacts (charts, reports) are authored light.

- Toggle lives in the gear-menu dropdown (Dark mode / Light mode), persists
  to localStorage.
- A tiny inline script in each page <head> (feed, settings, login) applies
  the stored theme before first paint, so dark-mode users never see a white
  flash on load.
- color-scheme: dark on the dark palette makes native form controls
  (inputs, buttons) render dark too.
- Semantic accents (kept=green, shared=blue, today, danger) got
  dark-appropriate variants; status/data-viz colors (usage bar, tag chips)
  and the white artifact backdrop are intentionally left as-is.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

templates/artifacts/_topbar.html

@@ -12,6 +12,7 @@
     <div class="user-menu-dropdown" hidden data-user-menu>
       <a href="{% url 'settings-account' %}">Settings</a>
       <a href="{% url 'settings-demo-data' %}">Demo Data</a>
+      <button type="button" data-theme-toggle>Dark mode</button>
       <form method="post" action="{% url 'logout' %}">{% csrf_token %}<button type="submit">Log out</button></form>
     </div>
   </div>
@@ -33,5 +34,25 @@
         toggle.setAttribute("aria-expanded", "false");
       }
     });
+
+    const themeToggle = document.querySelector("[data-theme-toggle]");
+    if (themeToggle) {
+      const syncLabel = () => {
+        const isDark = document.documentElement.getAttribute("data-theme") === "dark";
+        themeToggle.textContent = isDark ? "Light mode" : "Dark mode";
+      };
+      syncLabel();
+      themeToggle.addEventListener("click", () => {
+        const isDark = document.documentElement.getAttribute("data-theme") === "dark";
+        if (isDark) {
+          document.documentElement.removeAttribute("data-theme");
+          try { localStorage.setItem("daybook.theme", "light"); } catch (e) {}
+        } else {
+          document.documentElement.setAttribute("data-theme", "dark");
+          try { localStorage.setItem("daybook.theme", "dark"); } catch (e) {}
+        }
+        syncLabel();
+      });
+    }
   })();
 </script>

templates/artifacts/feed.html

@@ -5,6 +5,16 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>AgentFeed</title>
   <link rel="stylesheet" href="/static/daybook.css">
+  <script>
+    // Set the theme before first paint so dark-mode users never see a light flash.
+    (function () {
+      try {
+        if (localStorage.getItem("daybook.theme") === "dark") {
+          document.documentElement.setAttribute("data-theme", "dark");
+        }
+      } catch (e) {}
+    })();
+  </script>
 </head>
 <body>
   {% include "artifacts/_topbar.html" with topbar_toolbar="artifacts/_feed_toolbar.html" %}

templates/artifacts/login.html

@@ -5,6 +5,16 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Log in — AgentFeed</title>
   <link rel="stylesheet" href="/static/daybook.css">
+  <script>
+    // Set the theme before first paint so dark-mode users never see a light flash.
+    (function () {
+      try {
+        if (localStorage.getItem("daybook.theme") === "dark") {
+          document.documentElement.setAttribute("data-theme", "dark");
+        }
+      } catch (e) {}
+    })();
+  </script>
 </head>
 <body>
   <main class="login-page">

templates/artifacts/settings_base.html

@@ -5,6 +5,16 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Settings — AgentFeed</title>
   <link rel="stylesheet" href="/static/daybook.css">
+  <script>
+    // Set the theme before first paint so dark-mode users never see a light flash.
+    (function () {
+      try {
+        if (localStorage.getItem("daybook.theme") === "dark") {
+          document.documentElement.setAttribute("data-theme", "dark");
+        }
+      } catch (e) {}
+    })();
+  </script>
 </head>
 <body>
   {% include "artifacts/_topbar.html" %}