/* * theme.css - Shared colour-scheme tokens for every Balata single-page app. * * There are two schemes: * * - Dark (default): the bare :root block below. A touch lighter than the * apps' original #17181B so it is easier on the eyes. * - Light (opt-in) : :root[data-theme="light"]. A warm beige, never a * white background. * * The scheme is chosen with the toggle button wired up by theme.js and is * remembered in localStorage (key "balata-theme", shared by all apps on this * origin). A tiny inline script in each app's applies the saved choice * before first paint so there is no flash. * * Every app styles its components through these variables. The names match the * ones the apps already used as literals, plus a few additions: * * --text-faint third text level (done items, disabled, placeholders) * --link anchor colour (only a few apps use ) * --ok "success" green for the sync indicators * --warn "working offline / changes pending" gold for the sync indicators * --busy "sending / retrieving data" blue for the sync indicators * --shadow drop-shadow colour, lighter in the light scheme * * For hover / pressed tints, prefer color-mix(in srgb, var(--text) N%, transparent) * over a fixed rgba(): because --text flips between near-white and near-black, * the same declaration gives a light overlay on dark and a dark overlay on light. * * Accent and danger are deliberately NOT the same hue in both schemes: on the * beige light background the bright green (#16A085) and pink-red (#F14668) drop * below a readable contrast when used as text/icons, so the light scheme uses a * deeper green and a deeper red. */ :root { color-scheme: dark; --bg: #1E1F23; --card: #25272B; --card2: #2F3034; --line: rgba(255, 255, 255, 0.10); --text: #E7E7E9; --text-dim: #93959F; --text-faint: #6B6E77; --accent: #16A085; --on-accent: #0D0F17; --danger: #F14668; --link: #5B9DF9; --ok: #7BA88F; --warn: #E0A21E; --busy: #2179CF; --shadow: rgba(0, 0, 0, 0.35); } :root[data-theme="light"] { color-scheme: light; --bg: #D8D0C0; --card: #E0D9CB; --card2: #F2ECDF; --line: #735C2E; --text: #242732; --text-dim: #484C5B; --text-faint: #5E6472; --accent: #0A6151; --on-accent: #F9F9FB; --danger: #8E1F33; --link: #1A4F9E; --ok: #2E6B4E; --warn: #8A5A0B; --busy: #1C5FA6; --shadow: rgba(0, 0, 0, 0.14); } /* --------------------------------------------------------------------------- * Shared components. Every app pasted its own copy of these; this is the one * copy. Layout that varies per app (a margin, a flex context) stays in that * app's