/* === Dark mode === * Activated by data-theme="dark" on (set synchronously by an inline * script before any paint, see templates/*.html). * Toggle UI lives at .theme-toggle, behavior in /static/theme.js. */ :root[data-theme="dark"] { /* Base palette — warm dark, mirroring the editorial paper-warm light theme */ --ink: #ece9e1; --ink-light: #b8b5ac; --ink-muted: #807c73; --paper: #15140f; --paper-warm: #1f1d1a; --accent: #f17a2a; --accent-hover: #ff8f3f; --border: #2e2c28; --border-dark: #3d3b36; --success: #4ade80; --tag-bg: #2a2723; --white: #FFFFFF; /* Semantic surfaces */ --surface: #1f1d1a; --surface-muted: #1a1816; --surface-cool: #1c2030; --surface-input: #14130f; --chat-bg: #1a1816; /* Buttons — primary becomes the accent in dark mode (white-on-white would happen otherwise because var(--ink) inverts to a near-white) */ --btn-primary-bg: var(--accent); --btn-primary-text: #ffffff; --btn-primary-hover-bg: var(--accent-hover); /* Always-dark sections — push slightly darker so they still differentiate */ --brand-dark: #0c0b09; --text-on-brand: rgba(255, 255, 255, 0.95); --text-on-brand-muted: rgba(255, 255, 255, 0.7); --on-brand-input-bg: rgba(255, 255, 255, 0.06); --on-brand-input-border: rgba(255, 255, 255, 0.18); --on-brand-input-focus-border: rgba(255, 255, 255, 0.4); --on-brand-input-focus-bg: rgba(255, 255, 255, 0.12); /* Inputs / borders */ --input-soft-border: #2e2c28; --input-default-border: #2e2c28; --input-default-border-strong: #3d3b36; --recommended-border: #3a4565; /* Helper text */ --text-helper: #b8b5ac; --text-helper-strong: #ece9e1; --text-faint: #807c73; /* Shadows — deeper black on dark backgrounds */ --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.5); --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.6); --shadow-toggle-knob: 0 1px 3px rgba(0, 0, 0, 0.6); --modal-backdrop: rgba(0, 0, 0, 0.7); /* Feedback colors */ --error-bg: rgba(220, 38, 38, 0.18); --error-text: #fca5a5; --error-border: #ef4444; --feedback-bg: rgba(74, 222, 128, 0.15); --feedback-text: #86efac; /* Focus ring */ --focus-ring: rgba(241, 122, 42, 0.18); } /* Source logos look harsh inverted; soften them in dark mode */ :root[data-theme="dark"] .source-logo img { filter: grayscale(1) invert(1); opacity: 0.55; } /* The signup-left page uses an accent-radial; tone it down on dark */ :root[data-theme="dark"] .signup-left::before { background: radial-gradient(ellipse, rgba(241, 122, 42, 0.18) 0%, transparent 70%); } /* The features section uses faint accent radials; keep them subtle */ :root[data-theme="dark"] .features::before { background: radial-gradient(ellipse 80% 50% at 20% 40%, rgba(241, 122, 42, 0.06), transparent), radial-gradient(ellipse 60% 50% at 80% 60%, rgba(74, 222, 128, 0.04), transparent); } /* Right-side nav wrapper used on the dashboard so the toggle sits next to user-info */ .nav-actions { display: flex; align-items: center; gap: 1rem; } /* === Theme toggle button === */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--ink-light); cursor: pointer; font-family: inherit; transition: background-color 0.2s, color 0.2s, border-color 0.2s; } .theme-toggle:hover { background: var(--surface-muted); border-color: var(--border-dark); color: var(--ink); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle .theme-icon { display: none; width: 18px; height: 18px; } :root[data-theme-pref="auto"] .theme-toggle .theme-icon-auto { display: block; } :root[data-theme-pref="light"] .theme-toggle .theme-icon-light { display: block; } :root[data-theme-pref="dark"] .theme-toggle .theme-icon-dark { display: block; } /* When pref is unset (no JS yet), show the auto icon as a sensible default */ :root:not([data-theme-pref]) .theme-toggle .theme-icon-auto { display: block; }