/* theme-switcher.css — Helpdesk shared dark/light theme switcher * * Drop-in companion to _shared_ui/tokens.css. Adds a `[data-theme="light"]` * override for every `--app-color-*` token, plus a tiny set of generic * page-level rules so apps that don't migrate every hex to tokens still * pick up sensible body/background/text colors in light mode. * * Activation: `data-theme="dark|light"` is set on `` by theme-switcher.js * (or by an inline pre-render snippet to avoid flash). Default = dark. * * IMPORTANT: this file ONLY introduces new selectors / scoped overrides. * It NEVER overwrites the dark `:root` defaults from tokens.css — * those remain the single dark source-of-truth. */ /* ── Light theme tokens ─────────────────────────────────────────── */ :root[data-theme="light"] { /* Backgrounds */ --app-color-bg-primary: #f6f8fb; --app-color-bg-card: #ffffff; --app-color-bg-card-hover: #f0f4f8; --app-color-bg-soft: #eef2f6; --app-color-bg-elevated: #ffffff; /* Borders */ --app-color-border: #d0d7de; --app-color-border-strong: #afb8c1; /* Text */ --app-color-text-primary: #1f2328; --app-color-text-secondary: #57606a; --app-color-text-muted: #8b949e; /* Accents (slightly darkened blues for AAA contrast on white) */ --app-color-accent-blue: #0969da; --app-color-purple: #8250df; /* Status (vivid but legible on white) */ --app-color-success: #1a7f37; --app-color-danger: #cf222e; --app-color-warning: #9a6700; /* Shadows — softer, matches GitHub light feel */ --app-shadow-card: 0 1px 3px rgba(31, 35, 40, 0.12), 0 1px 2px rgba(31, 35, 40, 0.08); --app-shadow-modal: 0 12px 40px rgba(31, 35, 40, 0.18); } /* ── Dark theme tokens (explicit, for safety + completeness) ───── */ /* tokens.css already defines the dark values on :root. These are duplicated * under [data-theme="dark"] so a manual flip back from light explicitly * resets even if tokens.css order changes. Idempotent — same values. */ :root[data-theme="dark"] { --app-color-bg-primary: #0a0d12; --app-color-bg-card: #161b22; --app-color-bg-card-hover: #21262d; --app-color-bg-soft: #0d1117; --app-color-bg-elevated: #21262d; --app-color-border: #30363d; --app-color-border-strong: #484f58; --app-color-text-primary: #c9d1d9; --app-color-text-secondary: #8b949e; --app-color-text-muted: #6e7681; --app-color-accent-blue: #1f6feb; --app-color-purple: #a78bfa; --app-color-success: #56d364; --app-color-danger: #f85149; --app-color-warning: #d29922; --app-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.3); --app-shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.6); } /* ── Smooth body transition (no FOUC, no flicker) ───────────────── */ html, body { transition: background-color 200ms var(--app-ease, cubic-bezier(.4, 0, .2, 1)), color 200ms var(--app-ease, cubic-bezier(.4, 0, .2, 1)); } /* Generic page-level light overrides — picks up apps that hardcoded * the GitHub-dark hex set in body/header/nav without using tokens. * Surgical: only the most common chrome rules. App-specific zones * (charts, terminal) keep their hardcoded values. */ :root[data-theme="light"] body { background: var(--app-color-bg-primary) !important; color: var(--app-color-text-primary); } /* ── Theme toggle button ─────────────────────────────────────────── */ .app-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: var(--app-color-bg-card, #161b22); border: 1px solid var(--app-color-border, #30363d); border-radius: var(--app-radius-md, 8px); color: var(--app-color-text-primary, #c9d1d9); font-size: 16px; line-height: 1; cursor: pointer; transition: background 150ms var(--app-ease, ease), border-color 150ms var(--app-ease, ease), transform 150ms var(--app-ease, ease); user-select: none; } .app-theme-toggle:hover { background: var(--app-color-bg-card-hover, #21262d); border-color: var(--app-color-accent-blue, #1f6feb); transform: translateY(-1px); } .app-theme-toggle:active { transform: translateY(0); } .app-theme-toggle:focus-visible { outline: 2px solid var(--app-color-accent-blue, #1f6feb); outline-offset: 2px; } /* Sun emoji = currently light → click to go dark. * Moon emoji = currently dark → click to go light. * The .sun / .moon classes are toggled by JS. */ :root[data-theme="light"] .app-theme-toggle { color: #b08800; /* warm gold for the sun */ } :root[data-theme="dark"] .app-theme-toggle { color: #c9d1d9; /* moon stays cool */ } /* Slot — hostable inline anywhere in a header. Inline-flex so it * aligns with sibling badges/pills naturally. */ .app-theme-toggle-slot { display: inline-flex; align-items: center; } /* Reduced motion — drop the transitions */ @media (prefers-reduced-motion: reduce) { html, body { transition: none; } .app-theme-toggle { transition: none; } }