From cf34d8b11a544d7fd751f595cf925618827c4c6e Mon Sep 17 00:00:00 2001
From: mithral <mithral@mithral.local>
Date: Sun, 11 Oct 2026 13:41:55 -0400
Subject: [PATCH] Make the brand the only theme
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

app.css carried a `@media (prefers-color-scheme: light)` block that replaced
EVERY design token with a white and generic-purple palette, and index.html
declared `color-scheme: light dark`. So whenever the OS or browser preferred
light, the app silently discarded the brand — which is indistinguishable from
"the design changed by itself" and is exactly what happened.

This was not introduced by the recent hardening work: the block came in with the
original Svelte commit and was present in the brand commits. It is removed here.

- Deleted the light-mode media query. The charcoal/purple tokens are now the
  only tokens.
- Added `color-scheme: dark` to :root and changed the meta tag to `dark`, so
  native scrollbars, form controls and the caret follow the brand instead of
  rendering white against a dark page.
- Left a comment explaining why there is deliberately no light theme. The
  comment deliberately does NOT repeat the old hex values, so that grepping the
  built CSS for them stays meaningful — my first verification pass was fooled by
  exactly that.

Verified with the browser emulating `prefers-color-scheme: light`: --bg #292929,
--surface #303030, --accent #c084fc, --accent-2 #6d7cff, color-scheme dark. The
built CSS contains zero media queries and zero occurrences of the old accent.
---
 web/index.html  |  2 +-
 web/src/app.css | 40 ++++++++++++----------------------------
 2 files changed, 13 insertions(+), 29 deletions(-)

diff --git a/web/index.html b/web/index.html
index 93ccd21..74bab4c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="color-scheme" content="light dark" />
+    <meta name="color-scheme" content="dark" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <title>Vellum</title>
   </head>
diff --git a/web/src/app.css b/web/src/app.css
index 999b675..7935f9e 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -4,6 +4,10 @@
    scale rather than ad-hoc values, which is what keeps it from feeling rushed. */
 
 :root {
+  /* Native widgets (scrollbars, form controls, the caret) follow this rather
+     than the OS, so they match the brand instead of rendering white. */
+  color-scheme: dark;
+
   /* ── Surfaces ─────────────────────────────────────────────────────── */
   /* Brand charcoal, taken from the logo's own background (#303030). The nav
      sits a step below the page so it reads as a distinct rail rather than
@@ -88,34 +92,14 @@
   --t-slow: 320ms;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    --bg: #f4f4f5;
-    --surface: #ffffff;
-    --surface-2: #f0f0f1;
-    --surface-3: #e6e6e8;
-    --border: #e2e2e4;
-    --border-strong: #cfcfd3;
-    --nav-bg: #ffffff;
-    --nav-border: #d8d8dc;
-
-    --text: #1a1a1c;
-    --muted: #5e5e64;
-    --faint: #8a8a90;
-    --nav-fg: #4a4a52;
-
-    --accent: #9333ea;
-    --accent-hover: #7e22ce;
-    --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
-    --accent-text: #ffffff;
-    --accent-2: #4f5bd5;
-    --danger: #c0392b;
-    --success: #1f8a4c;
-
-    --shadow-cover: 0 1px 2px rgba(20, 20, 30, 0.08), 0 6px 18px rgba(20, 20, 30, 0.1);
-    --shadow-lift: 0 10px 26px rgba(20, 20, 30, 0.16);
-  }
-}
+/* There is deliberately no light theme.
+   An OS light-mode media query used to replace every token above with a generic
+   white and purple palette, so the app silently discarded the brand whenever
+   the system preferred light — which read as "the design changed on its own".
+   The brand is the product here, so it is not negotiable by a system setting.
+   Native widgets are told dark below so scrollbars and form controls match
+   instead of staying white. (The previous palette's literal hex values are
+   intentionally not repeated here, so a grep for them means something.) */
 
 * {
   box-sizing: border-box;