/* theme.css — site-wide dark mode. * CSP-safe: external file only, no inline style/script required. * Base palette (--bg, --text, --accent, …) is defined in each page's own CSS. * Here we (a) add light-mode "component" tokens, (b) override every token for * dark mode in two scopes — an explicit user choice AND the OS preference — * and (c) point the handful of hard-coded (non-token) surfaces at those tokens. * Load this file LAST in so its element/id rules win on source order. */ /* ---- Light-mode component tokens (defaults; identical to current design) ---- */ :root { --nav-bg: rgba(248,248,250,0.92); --surface: #ffffff; --input-bg: #f8f8fb; --input-text: #191a1f; --badge-bg: #eef4fc; --badge-text: #00478f; --cta-band-bg: #eef4fc; --warning-text: #5b4a3f; --prose-muted: #3a3a40; } /* ---- Dark tokens ---- * Applied twice: once for an explicit choice ([data-theme="dark"]) and once for * the OS setting, unless the visitor has explicitly forced light. Keep the two * blocks identical. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0d0f14; --bg2: #151821; --bg3: #1d212c; --accent: #4d9bff; --accent2: #7ab6ff; --text: #e6e8ee; --muted: #9aa0b0; --border: rgba(255,255,255,0.10); --border-accent: rgba(77,155,255,0.35); /* status colours used by a few pages (harmless where undefined) */ --pass: #3fbf7a; --fix: #ff6b5e; --watch: #e0a92e; --ok: #3fbf7a; --ok-bg: rgba(63,191,122,0.12); --warn: #e0a92e; --warn-bg: rgba(224,169,46,0.12); --neutral: #9aa0b0; --neutral-bg: rgba(154,160,176,0.10); /* component tokens */ --nav-bg: rgba(12,14,20,0.82); --surface: #151821; --input-bg: #1d212c; --input-text: #e6e8ee; --badge-bg: rgba(77,155,255,0.14); --badge-text: #9ec5ff; --cta-band-bg: rgba(77,155,255,0.10); --warning-text: #d9b48c; --prose-muted: #b3b8c4; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0d0f14; --bg2: #151821; --bg3: #1d212c; --accent: #4d9bff; --accent2: #7ab6ff; --text: #e6e8ee; --muted: #9aa0b0; --border: rgba(255,255,255,0.10); --border-accent: rgba(77,155,255,0.35); --pass: #3fbf7a; --fix: #ff6b5e; --watch: #e0a92e; --ok: #3fbf7a; --ok-bg: rgba(63,191,122,0.12); --warn: #e0a92e; --warn-bg: rgba(224,169,46,0.12); --neutral: #9aa0b0; --neutral-bg: rgba(154,160,176,0.10); --nav-bg: rgba(12,14,20,0.82); --surface: #151821; --input-bg: #1d212c; --input-text: #e6e8ee; --badge-bg: rgba(77,155,255,0.14); --badge-text: #9ec5ff; --cta-band-bg: rgba(77,155,255,0.10); --warning-text: #d9b48c; --prose-muted: #b3b8c4; } } /* ---- Component rules (ungated: resolve to the light defaults normally) ---- */ body { transition: background-color .3s ease, color .3s ease; } nav { background: var(--nav-bg); } /* Surfaces hard-coded to white in page CSS */ #search-input, .search-result a, .tool-sub, .scan-form, .scan-input, .scan-result, .faq details { background: var(--surface); } .tool-sub input[type="email"] { background: var(--input-bg); color: var(--input-text); } .tool-sub h2 { color: var(--text); } .tool-sub .sub-status { color: var(--accent); } .skill-badge.accent { background: var(--badge-bg); color: var(--badge-text); } .cta-band { background: var(--cta-band-bg); } .warning-box p { color: var(--warning-text); } .scan-result p, .about p { color: var(--prose-muted); } /* ---- Buttons: keep white text legible on the brighter dark-mode accent ---- * The bright --accent is great for links but too light for white button text, * so pin these solid-fill buttons to an AA-contrast blue in dark mode. */ :root[data-theme="dark"] .nav-cta, :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .github-cta, :root[data-theme="dark"] .download-pdf { background: #1f6fe0 !important; color: #fff !important; } :root[data-theme="dark"] .nav-cta:hover, :root[data-theme="dark"] .btn-primary:hover, :root[data-theme="dark"] .github-cta:hover, :root[data-theme="dark"] .download-pdf:hover { background: #3f86ea !important; } :root[data-theme="dark"] .scan-result.is-ok h3 { color: var(--ok); } :root[data-theme="dark"] .scan-result.is-warn h3 { color: var(--warn); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-cta, :root:not([data-theme="light"]) .btn-primary, :root:not([data-theme="light"]) .github-cta, :root:not([data-theme="light"]) .download-pdf { background: #1f6fe0 !important; color: #fff !important; } :root:not([data-theme="light"]) .nav-cta:hover, :root:not([data-theme="light"]) .btn-primary:hover, :root:not([data-theme="light"]) .github-cta:hover, :root:not([data-theme="light"]) .download-pdf:hover { background: #3f86ea !important; } :root:not([data-theme="light"]) .scan-result.is-ok h3 { color: var(--ok); } :root:not([data-theme="light"]) .scan-result.is-warn h3 { color: var(--warn); } } /* ---- Theme toggle button (injected into the nav by theme.js) ---- */ .theme-toggle-li { display: flex; align-items: center; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; margin: 0; background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); cursor: pointer; line-height: 1; font-family: inherit; transition: color .2s, border-color .2s, background .2s; } .theme-toggle:hover { color: var(--accent); border-color: var(--border-accent); } .theme-toggle-icon { font-size: 1.05rem; line-height: 1; } @media (max-width: 768px) { /* In the collapsed mobile menu the toggle sits as a full-width row. */ .theme-toggle-li { padding: 0.6rem 1.5rem; } } @media (prefers-reduced-motion: reduce) { body, .theme-toggle { transition: none; } }