/* Hindsight themes. Loaded by every page after its own stylesheet. * * Dark is the base: each stylesheet's :root holds the dark values. The * selectors below (:root[data-theme=...]) are more specific than :root, so they * win regardless of load order. The effective theme is set on by the * small script in the page head (see hsights/common/theme.py), before the first * paint, so the page never flashes the wrong colours. * * Charts are drawn in a mid-tone palette on transparent backgrounds, so they * need no per-theme colours (Plotly cannot read CSS variables). */ :root[data-theme="light"] { color-scheme: light; --bg: #f4f6fb; --panel: #ffffff; --panel-2: #fbfcff; --raise: #eef2f8; --line: #d9e0ec; --line-soft: #e6ebf3; --ink: #111a2c; --muted: #475672; --dim: #5f6d88; --accent: #3563e9; --accent-soft: rgba(53, 99, 233, .12); --up: #0f9f6e; --down: #d6334d; --warn: #b96f00; --link: #2c58d6; --up-ink: #0b8a5f; --warn-ink: #9a5c00; --down-ink: #c42b44; --raise-hover: #e3e9f4; --line-strong: #c3cddd; --card-top: #ffffff; --card-bottom: #f6f8fc; --on-accent: #ffffff; --accent-2: #4f7bf0; --accent-line: #3563e9; --down-2: #e04a62; --on-down: #ffffff; } :root[data-theme="paper"] { color-scheme: light; --bg: #f3eee3; --panel: #fbf7ee; --panel-2: #fffcf5; --raise: #efe7d7; --line: #ddd2bd; --line-soft: #e8dfcd; --ink: #2a241b; --muted: #5b5143; --dim: #74695a; --accent: #2f5fa8; --accent-soft: rgba(47, 95, 168, .12); --up: #2e7d4f; --down: #b3433a; --warn: #9a6212; --link: #2f5fa8; --up-ink: #28703f; --warn-ink: #8a560b; --down-ink: #a33a31; --raise-hover: #e8dec9; --line-strong: #cbbda3; --card-top: #fffcf5; --card-bottom: #f6efe1; --on-accent: #fffcf5; --accent-2: #4373bd; --accent-line: #2f5fa8; --down-2: #c65248; --on-down: #fffcf5; } /* Light themes: soften the dark-theme glows and shadows. */ :root[data-theme="light"] body, :root[data-theme="paper"] body { background: radial-gradient(1100px 620px at 16% -12%, var(--accent-soft), transparent 62%), var(--bg); } /* ----------------------------------------------------------- the switch */ .theme-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; border: 1px solid var(--line); background: var(--raise); flex: none; } .theme-switch button { width: auto; min-width: 0; padding: 5px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--dim); cursor: pointer; font-family: var(--mono, ui-monospace, monospace); font-size: 10px; font-weight: 600; letter-spacing: .08em; line-height: 1.2; box-shadow: none; } .theme-switch button:hover { color: var(--ink); background: var(--raise-hover); } :root[data-theme-pref="light"] .theme-switch [data-theme-choice="light"], :root[data-theme-pref="dark"] .theme-switch [data-theme-choice="dark"], :root[data-theme-pref="paper"] .theme-switch [data-theme-choice="paper"], :root[data-theme-pref="auto"] .theme-switch [data-theme-choice="auto"] { background: var(--accent); color: var(--on-accent); } @media (max-width: 640px) { .theme-switch button { padding: 5px 7px; } }