/* shared/theme.css — the app's ONE colour palette, for web + native. =================================================================== Every other stylesheet gets its colours from here. Before this file existed, colour was ~1200 hardcoded literals spread over 27 files plus a handful of per-feature :root blocks (--sb-*, --lb-*, --mg-tl-*, --habit-*, --mg-ai-*) that each invented their own near-miss shade of the same grey. Dark mode was impossible to add without touching all of them; now it is this file plus whatever has not been swept yet. Two layers: 1. SEMANTIC tokens (--mg-bg, --mg-surface, --mg-text, ...). These are what stylesheets should use. They say what a colour is FOR, not what it looks like, so the dark block below can redefine them without any other file caring. 2. The per-feature token blocks in ui/ and ui-mobile/ now alias these instead of holding literals, so old rules that still say var(--sb-card) keep working and follow the theme for free. Loading: linked FIRST in index.html , before any ui/ CSS, on BOTH platforms. Specificity notes matter here — see the native override near the bottom. Theme selection: index.html stamps data-theme="light"|"dark" on before first paint (from localStorage "magnet.theme"), so there is no flash of the wrong theme. "system" stores nothing and falls through to the prefers-color-scheme block. */ /* ------------------------------------------------------------------ LIGHT (default) ------------------------------------------------------------------ */ :root { color-scheme: light; /* Ground + surfaces. bg is the page itself; surface is a card on it; surface-2 is a raised/hover state; surface-3 is a sunken one (inputs, wells, track backgrounds). */ --mg-bg: #f5f5f7; --mg-bg-2: #fafafa; --mg-surface: #ffffff; --mg-surface-2: #f2f2f5; --mg-surface-3: #f7f7f8; --mg-surface-4: #ebebef; /* The "barely there" fill — rgba(0,0,0,0.03..0.07) all over the old CSS for segmented-control tracks, chip wells and hover states. A black wash is invisible on a dark ground, so in dark this inverts to a white wash instead of just darkening. */ --mg-well: rgba(0, 0, 0, 0.045); --mg-well-2: rgba(0, 0, 0, 0.075); /* Frosted chrome: panels that sit over content with backdrop-filter. They are a SURFACE, so in dark they have to become a translucent DARK slab — leaving them white-with-alpha turns every popover, the composer card and the tag flyout into a milky white sheet over a black page. --mg-surface-fade is the same colour at zero alpha, for the scroll-edge gradients (fading to rgba(255,255,255,0) leaves a grey haze in Safari/Chrome, which is a bug in both themes). */ --mg-glass: rgba(255, 255, 255, 0.92); --mg-glass-strong: rgba(255, 255, 255, 0.96); --mg-glass-solid: rgba(255, 255, 255, 0.98); --mg-surface-fade: rgba(255, 255, 255, 0); /* Text. -2 is secondary/meta, -3 is tertiary/placeholder/disabled. */ --mg-text: #1c1c1e; --mg-text-2: #6b6b70; --mg-text-3: #8a8a8e; --mg-text-inverse: #ffffff; /* Deliberately-dark chrome on a light page: the bell toast, the dark "spotlight" quick-add sheet. These must NOT flip to a light slab in dark mode (they'd end up white-on-white) — they only lift enough to separate from the ground. --mg-on-inverse is white in both themes. */ --mg-inverse-surface: #1c1c1e; --mg-on-inverse: #ffffff; /* Hairlines. */ --mg-border: rgba(28, 28, 30, 0.09); --mg-border-strong: rgba(28, 28, 30, 0.18); --mg-divider: rgba(60, 60, 67, 0.12); /* iOS separator tone */ /* Brand. accent-bg is the tinted "selected" fill; on-accent is text sitting ON the accent (stays white in both themes). */ --mg-accent: #0a7cff; --mg-accent-deep: #0060d0; --mg-accent-soft: rgba(10, 124, 255, 0.10); --mg-accent-bg: rgba(10, 124, 255, 0.10); --mg-accent-pale: #eaf3ff; --mg-accent-line: rgba(10, 124, 255, 0.22); /* accent-tinted hairline */ --mg-on-accent: #ffffff; /* Status. overdue/critical/high are the established priority ramp; do not collapse them into one red. */ --mg-danger: #d92d20; --mg-overdue: #c23b3b; --mg-critical: #e4572e; --mg-high: #d9971c; --mg-success: #1f9d4a; --mg-success-bg: #e6f6ec; --mg-warning: #ffb020; --mg-danger-bg: #ffd6d6; --mg-now: #ff3b30; /* the timeline NOW line */ --mg-note-bg: #fbf3d9; /* Timeline block fills. */ --mg-block-task: rgba(129, 140, 248, 0.32); --mg-block-task-border: rgba(99, 102, 241, 0.50); --mg-block-habit: rgba(16, 185, 129, 0.28); --mg-block-habit-border: rgba(5, 150, 105, 0.55); --mg-grid-line: rgba(20, 24, 35, 0.10); /* Elevation + overlay. */ --mg-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05); --mg-shadow-2: 0 2px 6px rgba(0, 0, 0, 0.06); --mg-shadow-3: 0 10px 30px rgba(0, 0, 0, 0.08); --mg-shadow-4: 0 18px 48px rgba(3, 12, 40, 0.14); --mg-scrim: rgba(0, 0, 0, 0.40); /* Coloured washes. The old CSS expressed "a bit of this hue behind a chip" as rgba(0,122,255,0.12) and friends, ~90 times across four hues. On a dark ground a 12% wash of the LIGHT-mode blue is mud, so each hue gets four strengths that both lift the base colour and raise the alpha in dark. Buckets: tint ≤15%, -2 ≤35%, -3 ≤70%, -solid above that (an effectively opaque chip). */ --mg-accent-tint: rgba(10, 124, 255, 0.10); --mg-accent-tint-2: rgba(10, 124, 255, 0.22); --mg-accent-tint-3: rgba(10, 124, 255, 0.40); --mg-accent-solid: rgba(10, 124, 255, 0.92); --mg-danger-tint: rgba(255, 59, 48, 0.10); --mg-danger-tint-2: rgba(255, 59, 48, 0.22); --mg-danger-tint-3: rgba(255, 59, 48, 0.45); --mg-danger-solid: rgba(255, 59, 48, 0.92); --mg-success-tint: rgba(52, 199, 89, 0.12); --mg-success-tint-2: rgba(52, 199, 89, 0.24); --mg-success-tint-3: rgba(52, 199, 89, 0.42); --mg-success-solid: rgba(52, 199, 89, 0.92); --mg-warning-tint: rgba(255, 149, 0, 0.12); --mg-warning-tint-2: rgba(255, 149, 0, 0.24); --mg-warning-tint-3: rgba(255, 149, 0, 0.50); --mg-warning-solid: rgba(255, 149, 0, 0.92); /* Chrome that is a coloured slab rather than a surface (the web left bar). Its icons are white-on-blue in light mode and stay light-on-slab in dark, so they get their own tokens. */ --mg-slab: #5078ff; --mg-slab-2: rgba(80, 120, 255, 0.92); --mg-slab-icon: rgba(255, 255, 255, 0.92); --mg-slab-icon-dim: rgba(255, 255, 255, 0.72); --mg-slab-divider: rgba(255, 255, 255, 0.16); } /* ------------------------------------------------------------------ DARK Two selectors, deliberately: • :root[data-theme="dark"] — explicit user choice • prefers-color-scheme + :not([data-theme="light"]) — "system", while still letting an explicit light choice win. The guard matters: without it, a user on a dark OS who picks Light would get dark anyway. Specificity: both are 0,2,0, which beats html.is-native-app (0,1,1), so the native light overrides at the bottom of this file cannot leak into dark. If you add a new native override, keep it BELOW-strength. ------------------------------------------------------------------ */ :root[data-theme="dark"] { color-scheme: dark; --mg-bg: #0e0f13; --mg-bg-2: #14161b; --mg-surface: #1a1d23; --mg-surface-2: #23262e; --mg-surface-3: #2a2e37; --mg-surface-4: #333844; --mg-well: rgba(255, 255, 255, 0.06); --mg-well-2: rgba(255, 255, 255, 0.10); --mg-glass: rgba(26, 29, 35, 0.92); --mg-glass-strong: rgba(26, 29, 35, 0.96); --mg-glass-solid: rgba(26, 29, 35, 0.98); --mg-surface-fade: rgba(26, 29, 35, 0); --mg-text: #f2f3f5; --mg-text-2: #a1a6b0; --mg-text-3: #7d828c; --mg-text-inverse: #14161b; --mg-inverse-surface: #2a2e37; --mg-on-inverse: #ffffff; --mg-border: rgba(255, 255, 255, 0.10); --mg-border-strong: rgba(255, 255, 255, 0.20); --mg-divider: rgba(255, 255, 255, 0.12); /* Lifted off #0a7cff: the light-mode blue fails contrast against a dark ground and reads muddy. */ --mg-accent: #3d95ff; --mg-accent-deep: #6fb4ff; --mg-accent-soft: rgba(61, 149, 255, 0.16); --mg-accent-bg: rgba(61, 149, 255, 0.16); --mg-accent-pale: rgba(61, 149, 255, 0.22); --mg-accent-line: rgba(61, 149, 255, 0.30); --mg-on-accent: #ffffff; --mg-danger: #ff6b5e; --mg-overdue: #ff7b6b; --mg-critical: #ff8a5c; --mg-high: #f0b429; --mg-success: #45c46f; --mg-success-bg: rgba(69, 196, 111, 0.16); --mg-warning: #ffc046; --mg-danger-bg: rgba(255, 107, 94, 0.20); --mg-now: #ff5b4d; --mg-note-bg: #34301f; --mg-block-task: rgba(129, 140, 248, 0.30); --mg-block-task-border: rgba(139, 148, 255, 0.55); --mg-block-habit: rgba(16, 185, 129, 0.26); --mg-block-habit-border: rgba(52, 211, 153, 0.55); --mg-grid-line: rgba(255, 255, 255, 0.08); /* Shadows do almost nothing on a dark ground — depth has to come from the surface ramp instead — but keep them for the cast under sheets and popovers. */ --mg-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40); --mg-shadow-2: 0 2px 6px rgba(0, 0, 0, 0.45); --mg-shadow-3: 0 10px 30px rgba(0, 0, 0, 0.55); --mg-shadow-4: 0 18px 48px rgba(0, 0, 0, 0.65); --mg-scrim: rgba(0, 0, 0, 0.60); --mg-accent-tint: rgba(61, 149, 255, 0.16); --mg-accent-tint-2: rgba(61, 149, 255, 0.30); --mg-accent-tint-3: rgba(61, 149, 255, 0.48); --mg-accent-solid: rgba(61, 149, 255, 0.92); --mg-danger-tint: rgba(255, 107, 94, 0.16); --mg-danger-tint-2: rgba(255, 107, 94, 0.30); --mg-danger-tint-3: rgba(255, 107, 94, 0.52); --mg-danger-solid: rgba(255, 107, 94, 0.92); --mg-success-tint: rgba(69, 196, 111, 0.18); --mg-success-tint-2: rgba(69, 196, 111, 0.32); --mg-success-tint-3: rgba(69, 196, 111, 0.50); --mg-success-solid: rgba(69, 196, 111, 0.92); --mg-warning-tint: rgba(255, 192, 70, 0.16); --mg-warning-tint-2: rgba(255, 192, 70, 0.30); --mg-warning-tint-3: rgba(255, 192, 70, 0.52); --mg-warning-solid: rgba(255, 192, 70, 0.92); --mg-slab: #1f2430; --mg-slab-2: rgba(31, 36, 48, 0.92); --mg-slab-icon: rgba(255, 255, 255, 0.88); --mg-slab-icon-dim: rgba(255, 255, 255, 0.55); --mg-slab-divider: rgba(255, 255, 255, 0.12); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --mg-bg: #0e0f13; --mg-bg-2: #14161b; --mg-surface: #1a1d23; --mg-surface-2: #23262e; --mg-surface-3: #2a2e37; --mg-surface-4: #333844; --mg-well: rgba(255, 255, 255, 0.06); --mg-well-2: rgba(255, 255, 255, 0.10); --mg-glass: rgba(26, 29, 35, 0.92); --mg-glass-strong: rgba(26, 29, 35, 0.96); --mg-glass-solid: rgba(26, 29, 35, 0.98); --mg-surface-fade: rgba(26, 29, 35, 0); --mg-text: #f2f3f5; --mg-text-2: #a1a6b0; --mg-text-3: #7d828c; --mg-text-inverse: #14161b; --mg-inverse-surface: #2a2e37; --mg-on-inverse: #ffffff; --mg-border: rgba(255, 255, 255, 0.10); --mg-border-strong: rgba(255, 255, 255, 0.20); --mg-divider: rgba(255, 255, 255, 0.12); --mg-accent: #3d95ff; --mg-accent-deep: #6fb4ff; --mg-accent-soft: rgba(61, 149, 255, 0.16); --mg-accent-bg: rgba(61, 149, 255, 0.16); --mg-accent-pale: rgba(61, 149, 255, 0.22); --mg-accent-line: rgba(61, 149, 255, 0.30); --mg-on-accent: #ffffff; --mg-danger: #ff6b5e; --mg-overdue: #ff7b6b; --mg-critical: #ff8a5c; --mg-high: #f0b429; --mg-success: #45c46f; --mg-success-bg: rgba(69, 196, 111, 0.16); --mg-warning: #ffc046; --mg-danger-bg: rgba(255, 107, 94, 0.20); --mg-now: #ff5b4d; --mg-note-bg: #34301f; --mg-block-task: rgba(129, 140, 248, 0.30); --mg-block-task-border: rgba(139, 148, 255, 0.55); --mg-block-habit: rgba(16, 185, 129, 0.26); --mg-block-habit-border: rgba(52, 211, 153, 0.55); --mg-grid-line: rgba(255, 255, 255, 0.08); --mg-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40); --mg-shadow-2: 0 2px 6px rgba(0, 0, 0, 0.45); --mg-shadow-3: 0 10px 30px rgba(0, 0, 0, 0.55); --mg-shadow-4: 0 18px 48px rgba(0, 0, 0, 0.65); --mg-scrim: rgba(0, 0, 0, 0.60); --mg-accent-tint: rgba(61, 149, 255, 0.16); --mg-accent-tint-2: rgba(61, 149, 255, 0.30); --mg-accent-tint-3: rgba(61, 149, 255, 0.48); --mg-accent-solid: rgba(61, 149, 255, 0.92); --mg-danger-tint: rgba(255, 107, 94, 0.16); --mg-danger-tint-2: rgba(255, 107, 94, 0.30); --mg-danger-tint-3: rgba(255, 107, 94, 0.52); --mg-danger-solid: rgba(255, 107, 94, 0.92); --mg-success-tint: rgba(69, 196, 111, 0.18); --mg-success-tint-2: rgba(69, 196, 111, 0.32); --mg-success-tint-3: rgba(69, 196, 111, 0.50); --mg-success-solid: rgba(69, 196, 111, 0.92); --mg-warning-tint: rgba(255, 192, 70, 0.16); --mg-warning-tint-2: rgba(255, 192, 70, 0.30); --mg-warning-tint-3: rgba(255, 192, 70, 0.52); --mg-warning-solid: rgba(255, 192, 70, 0.92); --mg-slab: #1f2430; --mg-slab-2: rgba(31, 36, 48, 0.92); --mg-slab-icon: rgba(255, 255, 255, 0.88); --mg-slab-icon-dim: rgba(255, 255, 255, 0.55); --mg-slab-divider: rgba(255, 255, 255, 0.12); } } /* ------------------------------------------------------------------ LIGHT-MODE PLATFORM SPLIT The native shell's ground is a deliberately warm neutral (see the header comment in ui-mobile/shell.css) while the web's is cool grey. That distinction is worth keeping in light mode and pointless in dark, where both are near-black. Specificity 0,1,1 — under both dark selectors above, so dark still wins. ------------------------------------------------------------------ */ html.is-native-app { --mg-bg: #f7f6f3; } /* ------------------------------------------------------------------ LEGACY ALIASES Per-feature token names that predate this file. They used to hold literals in their own stylesheet's :root; now they point here, so every existing rule that says var(--sb-card) or var(--mg-tl-accent) themes itself with no further edits. Keep them — rewriting ~400 call sites to the semantic names buys nothing. Non-colour tokens (radii, durations, easing) stay in their own files; they do not vary by theme. ------------------------------------------------------------------ */ :root { /* ui/sidebar.css */ --sb-bg: var(--mg-bg-2); --sb-card: var(--mg-surface); --sb-text: var(--mg-text); --sb-sub: var(--mg-text-2); --sb-line: var(--mg-border); --sb-blue: var(--mg-accent); --sb-blue-weak: var(--mg-accent-bg); --sb-shadow: var(--mg-shadow-3); /* ui/leftbar.css — the coloured slab, not a surface. */ --lb-blue: var(--mg-slab); --lb-blue-2: var(--mg-slab-2); --lb-icon: var(--mg-slab-icon); --lb-icon-dim: var(--mg-slab-icon-dim); --lb-divider: var(--mg-slab-divider); --lb-shadow: var(--mg-shadow-3); /* ui/timeline.css */ --mg-tl-accent: var(--mg-accent); --mg-tl-accent-soft: var(--mg-accent-soft); --mg-tl-bg-task: var(--mg-block-task); --mg-tl-bg-task-border: var(--mg-block-task-border); --mg-tl-habit-task: var(--mg-block-habit); --mg-tl-habit-task-border: var(--mg-block-habit-border); --mg-tl-grid-line: var(--mg-grid-line); --mg-tl-text-secondary: var(--mg-text-2); --mg-tl-border-subtle: var(--mg-border); --mg-tl-now: var(--mg-now); /* ui/ + ui-mobile/ ai-assistant.css */ --mg-ai-blue: var(--mg-accent); --mg-ai-blue-deep: var(--mg-accent-deep); --mg-ai-blue-pale: var(--mg-accent-pale); --mg-ai-surface: var(--mg-surface); /* Accent-tinted, not the neutral hairline: the blue rim is part of the AI dock's identity and was rgba(36,119,243,0.22) before. */ --mg-ai-border: var(--mg-accent-line); --mg-ai-text: var(--mg-text); --mg-ai-text-2: var(--mg-text-2); --mg-ai-shadow-dock: var(--mg-shadow-2), var(--mg-shadow-3); --mg-ai-shadow-panel: var(--mg-shadow-4); /* ui-mobile/habit-screen.css */ --habit-blue: var(--mg-accent); --habit-blue-2: var(--mg-accent-deep); --habit-blue-3: var(--mg-accent); --habit-bg: var(--mg-bg); --habit-surface: var(--mg-surface); --habit-text: var(--mg-text); --habit-text-2: var(--mg-text-2); --habit-shadow-card: var(--mg-shadow-3); /* ui/textcomposer.css + ui/ui.css */ --ios-sep: var(--mg-divider); }