/* The one place the app's colours are defined. * * Every app stylesheet used to carry its own copy of the same `:root` block, so * a palette change meant editing eleven files and the app could only ever be * dark. They now all read these tokens instead, which gives us two themes for * the price of one. * * Resolution order (see core/theme.js — the same rules, applied before paint): * 1. an explicit choice -> * 2. otherwise the system -> prefers-color-scheme * 3. otherwise -> light * * So the bare `:root` block below is the *light* palette: it is what a visitor * gets when neither they nor their OS has expressed a preference. Dark is * layered on top twice — once for "the system asked for it" (skipped when the * user explicitly picked light) and once for "the user asked for it" (which * must win even on a light system). */ /* ---- Light (the default) ------------------------------------------------ */ :root { --bg: #f5f7fa; --bg-deep: #e9edf3; /* recessed surround: preview stages, canvases */ --panel: #ffffff; --panel2: #eef2f7; /* raised-but-quiet: inputs, popovers, chips */ --line: #d9e0e9; --line2: #b3bfcf; /* the hover/emphasis border */ --ink: #18212e; --muted: #5a6a7e; --accent: #1a5fd0; /* links, focus rings, primary-button hover */ --accent2: #2f6fed; /* primary-button rest */ --on-accent: #ffffff; /* text/icons sitting on --accent2 */ --chip: #eef1f6; --hover: rgba(16, 24, 40, .05); --good: #137a35; --warn: #8a6100; --bad: #c9282f; /* text / tint / border trio for each status, for banners and pills */ --good-fg: #0f6b2c; --good-bg: rgba(19, 122, 53, .09); --good-line: rgba(19, 122, 53, .32); --warn-fg: #7a5400; --warn-bg: rgba(138, 97, 0, .10); --warn-line: rgba(138, 97, 0, .32); --bad-fg: #a71d2a; --bad-bg: rgba(201, 40, 47, .08); --bad-line: rgba(201, 40, 47, .28); --accent-fg: #13458f; --accent-bg: rgba(47, 111, 237, .09); --accent-line: rgba(47, 111, 237, .40); --scrim: rgba(23, 32, 46, .40); --shadow-sm: 0 4px 12px rgba(16, 24, 40, .14); --shadow-md: 0 12px 30px rgba(16, 24, 40, .16); --shadow-lg: 0 22px 60px rgba(16, 24, 40, .20); --scroll-thumb: #c3ccd9; --row-line: rgba(217, 224, 233, .9); /* the faint rule between table rows */ --shadow-color: rgba(16, 24, 40, .16); /* for one-off directional shadows */ --panel-glass: rgba(255, 255, 255, .88); /* toolbars floating over the canvas */ --accent-alt: #7c3aad; /* the second categorical accent (couple/ceremony tags) */ --accent-cyan: #0b6c93; /* plus-one markers in the planner */ --accent-cyan-line: #9fd0e4; /* Sidebar (core/sidebar.css) */ --nv-bg: #ffffff; --nv-bg2: #f2f5fa; --nv-line: #dfe5ee; --nv-fg: #2b3543; --nv-mut: #5a6a7e; --nv-on: #0f2f66; /* the active item's text */ --nv-avatar-ink: #ffffff; /* on --nv-accent, which is dark here and light in dark mode */ --nv-accent: var(--accent); --nv-accent-bg: var(--accent-bg); /* Hall-planner canvas (hallplanner/planner/render.js reads these) * * The floor is deliberately *dimmer* than the tables on it. A white floor * (which this was) leaves nothing for a table, an empty chair or a pale zone * tint to be brighter than, so every element washes out; dimming the floor * and whitening the table top restores the contrast the plan needs. The * surround is darker again, so the hall reads as a lit sheet on a desk. */ --cv-floor: #dfe6f0; --cv-stage-a: #c8d1de; /* the radial backdrop behind the floor */ --cv-stage-b: #b4bfd0; --cv-grid: rgba(16, 24, 40, .11); --cv-dim: #64717f; /* the hall's dimension labels */ --cv-text: #18212e; /* element names, drawn on the floor */ --cv-table: #ffffff; --cv-table-bad: #fbd7d5; --cv-table-warn: #fbecc4; --cv-table-ink: #3c4757; /* the n/cap in the middle of a table */ --cv-over: #8a5a00; /* …when that table is over capacity */ --cv-seat-empty: #ffffff; /* The hairline around an *occupied* chair, so the coloured dot keeps its edge * against the table. Dark here, light in dark mode — it traces the seat, so * it has to oppose the surface, not match it. */ --cv-seat-rim: rgba(16, 24, 40, .30); --cv-mix: #ffffff; /* what a "done" table's fill is tinted from */ --cv-text-mix: #0e1116; /* …and what its label is darkened/lightened toward */ } /* ---- Dark, because the system asked ------------------------------------- */ /* Guarded: someone who explicitly chose light keeps light on a dark OS. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0e1116; --bg-deep: #0a0c10; --panel: #161b22; --panel2: #1c2230; --line: #2a313c; --line2: #3a4658; --ink: #e6edf3; --muted: #8b97a7; --accent: #4c9aff; --accent2: #2f6fed; --on-accent: #ffffff; --chip: #222a36; --hover: rgba(255, 255, 255, .05); --good: #3fb950; --warn: #e3b341; --bad: #f85149; --good-fg: #a8e6bd; --good-bg: rgba(63, 185, 80, .12); --good-line: rgba(63, 185, 80, .40); --warn-fg: #f0d79a; --warn-bg: rgba(227, 179, 65, .10); --warn-line: rgba(227, 179, 65, .40); --bad-fg: #ffb4ae; --bad-bg: rgba(248, 81, 73, .11); --bad-line: rgba(248, 81, 73, .35); --accent-fg: #cfe0f8; --accent-bg: rgba(76, 154, 255, .12); --accent-line: rgba(76, 154, 255, .45); --scrim: rgba(4, 6, 10, .62); --shadow-sm: 0 4px 12px rgba(0, 0, 0, .5); --shadow-md: 0 12px 30px rgba(0, 0, 0, .5); --shadow-lg: 0 22px 60px rgba(0, 0, 0, .55); --scroll-thumb: #2b3442; --row-line: rgba(42, 49, 60, .5); --shadow-color: rgba(0, 0, 0, .45); --panel-glass: rgba(22, 27, 34, .88); --accent-alt: #c98bdb; --accent-cyan: #7fd1ff; --accent-cyan-line: #2b5b78; --nv-bg: #11151b; --nv-bg2: #0c0f14; --nv-line: #1e2632; --nv-fg: #c9d3df; --nv-mut: #7d8a9b; --nv-on: #ffffff; --nv-avatar-ink: #06101f; --cv-floor: #0f141b; --cv-stage-a: #12171f; --cv-stage-b: #0c0f14; --cv-grid: rgba(255, 255, 255, .05); --cv-dim: #6b7686; --cv-text: #e6edf3; --cv-table: #20272f; --cv-table-bad: #3a1d20; --cv-table-warn: #332a17; --cv-table-ink: #cdd6e2; --cv-over: #f0c05a; --cv-seat-empty: #141a24; --cv-seat-rim: rgba(255, 255, 255, .45); --cv-mix: #0e1116; --cv-text-mix: #ffffff; } } /* ---- Dark, because the user asked --------------------------------------- */ /* The same declarations again, deliberately: CSS cannot alias a rule into and out of a media query, and this one has to be unguarded and last so that an explicit dark also wins on a light system. core/tests_theme.py asserts the two dark blocks stay in step. */ :root[data-theme="dark"] { --bg: #0e1116; --bg-deep: #0a0c10; --panel: #161b22; --panel2: #1c2230; --line: #2a313c; --line2: #3a4658; --ink: #e6edf3; --muted: #8b97a7; --accent: #4c9aff; --accent2: #2f6fed; --on-accent: #ffffff; --chip: #222a36; --hover: rgba(255, 255, 255, .05); --good: #3fb950; --warn: #e3b341; --bad: #f85149; --good-fg: #a8e6bd; --good-bg: rgba(63, 185, 80, .12); --good-line: rgba(63, 185, 80, .40); --warn-fg: #f0d79a; --warn-bg: rgba(227, 179, 65, .10); --warn-line: rgba(227, 179, 65, .40); --bad-fg: #ffb4ae; --bad-bg: rgba(248, 81, 73, .11); --bad-line: rgba(248, 81, 73, .35); --accent-fg: #cfe0f8; --accent-bg: rgba(76, 154, 255, .12); --accent-line: rgba(76, 154, 255, .45); --scrim: rgba(4, 6, 10, .62); --shadow-sm: 0 4px 12px rgba(0, 0, 0, .5); --shadow-md: 0 12px 30px rgba(0, 0, 0, .5); --shadow-lg: 0 22px 60px rgba(0, 0, 0, .55); --scroll-thumb: #2b3442; --row-line: rgba(42, 49, 60, .5); --shadow-color: rgba(0, 0, 0, .45); --panel-glass: rgba(22, 27, 34, .88); --accent-alt: #c98bdb; --accent-cyan: #7fd1ff; --accent-cyan-line: #2b5b78; --nv-bg: #11151b; --nv-bg2: #0c0f14; --nv-line: #1e2632; --nv-fg: #c9d3df; --nv-mut: #7d8a9b; --nv-on: #ffffff; --nv-avatar-ink: #06101f; --cv-floor: #0f141b; --cv-stage-a: #12171f; --cv-stage-b: #0c0f14; --cv-grid: rgba(255, 255, 255, .05); --cv-dim: #6b7686; --cv-text: #e6edf3; --cv-table: #20272f; --cv-table-bad: #3a1d20; --cv-table-warn: #332a17; --cv-table-ink: #cdd6e2; --cv-over: #f0c05a; --cv-seat-empty: #141a24; --cv-seat-rim: rgba(255, 255, 255, .45); --cv-mix: #0e1116; --cv-text-mix: #ffffff; }