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>

static/daybook.css

@@ -12,12 +12,71 @@
   --selected-artifact-bg: #eaf3ff;
   --selected-artifact-rail: #dcecff;
   --control-border: #d9dee6;
+  /* Neutrals/accents that were previously hardcoded in rules, pulled into
+     variables so the dark override below can flip them in one place. */
+  --accent: #3d4552;
+  --accent-border: #343b46;
+  --on-accent: #ffffff;
+  --control-bg: #f0f2f5;
+  --row-hover: #f6f9fd;
+  --time-rail-bg: #f3f5f7;
+  --splitter-hover: #b8c0cc;
+  --scrollbar-thumb: var(--scrollbar-thumb);
+  --focus-ring: var(--focus-ring);
+  /* Semantic accents (success = kept, info = shared, today, danger). */
+  --success-bg: #eaf7ed;
+  --success-text: #28583a;
+  --success-border: #9bd4ab;
+  --info-bg: #eaf2fb;
+  --info-text: #1d4d85;
+  --info-border: #9cc0ed;
+  --today-bg: #d8f1df;
+  --today-text: #245238;
+  --danger-bg: #fdecea;
+  --danger-text: #a3312a;
+  --danger-text-plain: #c14f4f;
   color-scheme: light;
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   background: var(--app-bg);
   color: var(--text);
 }
 
+[data-theme="dark"] {
+  --app-bg: #15171c;
+  --surface: #1d2026;
+  --surface-alt: #242832;
+  --pane-bar-bg: #1d2026;
+  --grid-line: #333842;
+  --text: #e3e6eb;
+  --muted: #99a2b0;
+  --selected-day-bg: #4a6ea8;
+  --day-tile-bg: #2a2f3a;
+  --selected-artifact-bg: #26344a;
+  --selected-artifact-rail: #32405a;
+  --control-border: #3a404b;
+  --accent: #4a6ea8;
+  --accent-border: #3d5a8a;
+  --on-accent: #ffffff;
+  --control-bg: #2a2f3a;
+  --row-hover: #262b34;
+  --time-rail-bg: #22262e;
+  --splitter-hover: #4a525f;
+  --scrollbar-thumb: rgba(160, 170, 190, 0.35);
+  --focus-ring: var(--focus-ring);
+  --success-bg: #1e3a2a;
+  --success-text: #7fce9c;
+  --success-border: #2f5a40;
+  --info-bg: #1c3050;
+  --info-text: #8fb8e8;
+  --info-border: #34517d;
+  --today-bg: #1e3a2a;
+  --today-text: #7fce9c;
+  --danger-bg: #3a2020;
+  --danger-text: #e89b95;
+  --danger-text-plain: #e89b95;
+  color-scheme: dark;
+}
+
 html,
 body {
   height: 100%;
@@ -174,10 +233,10 @@ h1 {
 }
 
 .filter button {
-  background: #3d4552;
+  background: var(--accent);
-  border: 1px solid #343b46;
+  border: 1px solid var(--accent-border);
   border-radius: 4px;
-  color: #ffffff;
+  color: var(--on-accent);
   cursor: pointer;
   font: inherit;
   font-weight: 700;
@@ -185,7 +244,7 @@ h1 {
 }
 
 .view-toggle {
-  background: #f0f2f5;
+  background: var(--control-bg);
   border: 1px solid var(--control-border);
   border-radius: 4px;
   display: flex;
@@ -201,8 +260,8 @@ h1 {
 }
 
 .view-toggle a.selected {
-  background: #3d4552;
+  background: var(--accent);
-  color: #ffffff;
+  color: var(--on-accent);
 }
 
 .feed {
@@ -257,7 +316,7 @@ h1 {
 }
 
 .source-sidebar:hover .source-list {
-  scrollbar-color: rgba(61, 69, 82, 0.35) transparent;
+  scrollbar-color: var(--scrollbar-thumb) transparent;
   scrollbar-width: thin;
 }
 
@@ -271,7 +330,7 @@ h1 {
 
 /* Artifact list: scrollbar always visible so it doesn't jump on hover. */
 .artifact-list {
-  scrollbar-color: rgba(61, 69, 82, 0.35) transparent;
+  scrollbar-color: var(--scrollbar-thumb) transparent;
   scrollbar-width: thin;
 }
 
@@ -281,7 +340,7 @@ h1 {
 
 .source-list::-webkit-scrollbar-thumb,
 .artifact-list::-webkit-scrollbar-thumb {
-  background: rgba(61, 69, 82, 0.35);
+  background: var(--scrollbar-thumb);
   border-radius: 999px;
 }
 
@@ -326,7 +385,7 @@ h1 {
 
 .splitter:hover,
 .is-resizing .splitter {
-  background: #b8c0cc;
+  background: var(--splitter-hover);
 }
 
 .is-resizing {
@@ -376,18 +435,18 @@ h1 {
 }
 
 .source-link:focus-visible {
-  outline: 2px solid #8ab4f8;
+  outline: 2px solid var(--focus-ring);
   outline-offset: 2px;
 }
 
 .source-link.selected {
   background: var(--selected-day-bg);
-  color: #ffffff;
+  color: var(--on-accent);
 }
 
 .source-link.selected .source-name,
 .source-link.selected .source-count {
-  color: #ffffff;
+  color: var(--on-accent);
 }
 
 .source-name {
@@ -435,9 +494,9 @@ h1 {
 }
 
 .today-badge {
-  background: #d8f1df;
+  background: var(--today-bg);
   border-radius: 999px;
-  color: #245238;
+  color: var(--today-text);
   display: inline-block;
   font-size: 0.62rem;
   font-style: normal;
@@ -498,13 +557,13 @@ h1 {
 }
 
 .artifact-row:hover {
-  background: #f6f9fd;
+  background: var(--row-hover);
   box-shadow: none;
 }
 
 .artifact-row:focus-visible {
   outline: 0;
-  box-shadow: inset 0 0 0 1px #8ab4f8;
+  box-shadow: inset 0 0 0 1px var(--focus-ring);
 }
 
 .artifact-row.selected {
@@ -559,9 +618,9 @@ h1 {
 
 .kept-badge {
   align-items: center;
-  background: #eaf7ed;
+  background: var(--success-bg);
   border-radius: 4px;
-  color: #28583a;
+  color: var(--success-text);
   display: inline-flex;
   font-size: 0.66rem;
   font-weight: 700;
@@ -577,9 +636,9 @@ h1 {
 
 .shared-badge {
   align-items: center;
-  background: #eaf2fb;
+  background: var(--info-bg);
   border-radius: 4px;
-  color: #1d4d85;
+  color: var(--info-text);
   display: inline-flex;
   font-size: 0.66rem;
   font-weight: 700;
@@ -622,7 +681,7 @@ h1 {
 
 .artifact-time {
   align-items: center;
-  background: #f3f5f7;
+  background: var(--time-rail-bg);
   border-right: 1px solid var(--grid-line);
   display: flex;
   justify-content: flex-end;
@@ -653,7 +712,7 @@ h1 {
 }
 
 kbd {
-  background: #f0f2f5;
+  background: var(--control-bg);
   border: 1px solid var(--control-border);
   border-radius: 4px;
   color: var(--text);
@@ -784,7 +843,7 @@ kbd {
 
   .source-sidebar,
   .artifact-sidebar {
-    border-bottom: 1px solid #d9c9ad;
+    border-bottom: 1px solid var(--grid-line);
     border-right: 0;
     max-height: 32vh;
   }
@@ -834,7 +893,7 @@ kbd {
 }
 
 .login-error {
-  color: #c14f4f;
+  color: var(--danger-text-plain);
   font-size: 0.82rem;
 }
 
@@ -884,9 +943,9 @@ kbd {
 }
 
 .settings-messages {
-  background: #eaf7ed;
+  background: var(--success-bg);
   border-radius: 8px;
-  color: #28583a;
+  color: var(--success-text);
   list-style: none;
   margin: 0 0 1.2rem;
   padding: 0.6rem 0.9rem;
@@ -901,15 +960,15 @@ kbd {
 }
 
 .keep-button.kept {
-  background: #eaf7ed;
+  background: var(--success-bg);
-  border-color: #9bd4ab;
+  border-color: var(--success-border);
-  color: #28583a;
+  color: var(--success-text);
 }
 
 .share-button.shared {
-  background: #eaf2fb;
+  background: var(--info-bg);
-  border-color: #9cc0ed;
+  border-color: var(--info-border);
-  color: #1d4d85;
+  color: var(--info-text);
 }
 
 .share-link-box {
@@ -1014,9 +1073,9 @@ kbd {
 }
 
 .storage-warning {
-  background: #fdecea;
+  background: var(--danger-bg);
   border-radius: 8px;
-  color: #a3312a;
+  color: var(--danger-text);
   font-size: 0.85rem;
   padding: 0.6rem 0.9rem;
 }

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" %}