ad3laid3/Vellum
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make the brand the only theme

Browse source 
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.
This commit is contained in:
mithral 2026-10-11 13:41:55 -04:00
parent 00c1c0d619
commit cf34d8b11a
2 changed files with 13 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/index.html
View file

@ -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>

40
web/src/app.css
View file

@ -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;