/* ───────────────────────────────────────────────────────── Perch — site-wide theming. The base palette (light "Daybreak") lives in assets/dark-theme.css :root. This file adds the DARK palette as a token flip keyed off `:root[data-theme="dark"]`, set by js/theme.js (persisted choice) and the no-flash inline snippet in each page's (defaults to the OS theme). Because the app's CSS is overwhelmingly token-driven (var(--bg/--panel/--ink/ --muted/--border/--green/...)), overriding the token VALUES re-themes almost everything automatically. The handful of components with hardcoded colors get explicit `[data-theme="dark"]` overrides at the bottom. The fullscreen scene viewer (#perch-scene-dlg) is intentionally always-dark (its own scoped tokens in perch-view.css) and is deliberately NOT touched. ───────────────────────────────────────────────────────── */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; /* Backgrounds */ --bg: #0b0f17; /* page background */ --panel: #141a23; /* header, cards, sidebar, footer */ /* Text */ --ink: #f1f4f7; --muted: #9aa6b2; --muted-light: #6c7682; /* Borders */ --border: rgba(255, 255, 255, 0.08); --border-mid: rgba(255, 255, 255, 0.14); /* Green — primary accent (brighter so it reads on dark) */ --green: #5cc16f; --green-dim: rgba(92, 193, 111, 0.14); /* Orange — picks, draft state */ --orange: #e0902f; --orange-dim: rgba(224, 144, 47, 0.15); /* Sky — links */ --sky: #6cb6ff; --sky-dim: rgba(108, 182, 255, 0.14); /* Semantic */ --like-red: #e26470; --like-red-dim: rgba(226, 100, 112, 0.16); } /* Dark scrollbars (the light defaults in dark-theme.css use black-on-dark and vanish). */ :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); } :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.26); } :root[data-theme="dark"] * { scrollbar-color: rgba(255, 255, 255, 0.16) var(--bg); } /* ── Footer theme toggle (injected by js/theme.js) ───────── */ .theme-toggle-row { display: flex; justify-content: center; margin-top: 16px; } .theme-toggle { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); } .theme-toggle button { display: inline-flex; align-items: center; border: none; background: none; cursor: pointer; font-family: var(--font-ui); font-size: 11.5px; font-weight: 500; color: var(--muted); padding: 5px 12px; border-radius: 999px; line-height: 1; transition: color 0.14s, background 0.14s; } .theme-toggle button:hover { color: var(--ink); } .theme-toggle button[aria-pressed="true"] { background: var(--green-dim); color: var(--green); font-weight: 600; } .theme-toggle--floating { position: fixed; bottom: 14px; right: 14px; z-index: 1000; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); } /* ───────────────────────────────────────────────────────── Hardcoded-color stragglers — components that don't read tokens. (Use background-color, never the `background` shorthand, on the cover placeholders so we don't wipe their inline background-image cover photo.) ───────────────────────────────────────────────────────── */ /* Image-placeholder fills shown behind thumbnails while they load (light tan #e8e0d4 / #eef2ee → dark). */ :root[data-theme="dark"] .p-card-thumb, :root[data-theme="dark"] .p-loved-card-photo, :root[data-theme="dark"] .pp-card-cover, :root[data-theme="dark"] .ph-group-card .gc-cover { background-color: #1b212b; } /* Logged-in home: group cards are a hardcoded white panel. */ :root[data-theme="dark"] .ph-group-card { background-color: var(--panel); border-color: var(--border); } /* Perch viewer: the search field flips to solid white on focus. */ :root[data-theme="dark"] .p-filter-search:focus { background-color: var(--panel); } /* Signed-in header nav: black-tint hovers vanish on dark; green CTA hover darkened to near-black green. */ :root[data-theme="dark"] .header-nav a:hover, :root[data-theme="dark"] .header-nav button:hover { background: rgba(255, 255, 255, 0.06); } :root[data-theme="dark"] .header-nav .btn-cta:hover { background: #4aa85c; }