Make the brand the only theme
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:
parent
00c1c0d619
commit
cf34d8b11a
2 changed files with 13 additions and 29 deletions
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<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" />
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
<title>Vellum</title>
|
<title>Vellum</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,10 @@
|
||||||
scale rather than ad-hoc values, which is what keeps it from feeling rushed. */
|
scale rather than ad-hoc values, which is what keeps it from feeling rushed. */
|
||||||
|
|
||||||
:root {
|
: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 ─────────────────────────────────────────────────────── */
|
/* ── Surfaces ─────────────────────────────────────────────────────── */
|
||||||
/* Brand charcoal, taken from the logo's own background (#303030). The nav
|
/* 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
|
sits a step below the page so it reads as a distinct rail rather than
|
||||||
|
|
@ -88,34 +92,14 @@
|
||||||
--t-slow: 320ms;
|
--t-slow: 320ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
/* There is deliberately no light theme.
|
||||||
:root {
|
An OS light-mode media query used to replace every token above with a generic
|
||||||
--bg: #f4f4f5;
|
white and purple palette, so the app silently discarded the brand whenever
|
||||||
--surface: #ffffff;
|
the system preferred light — which read as "the design changed on its own".
|
||||||
--surface-2: #f0f0f1;
|
The brand is the product here, so it is not negotiable by a system setting.
|
||||||
--surface-3: #e6e6e8;
|
Native widgets are told dark below so scrollbars and form controls match
|
||||||
--border: #e2e2e4;
|
instead of staying white. (The previous palette's literal hex values are
|
||||||
--border-strong: #cfcfd3;
|
intentionally not repeated here, so a grep for them means something.) */
|
||||||
--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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue