/* ============================================= THEME — Light / Dark Mode Reads browser preference by default. data-theme="light" or "dark" on overrides when user manually toggles. ============================================= */ :root { /* Light mode defaults */ --bg-primary: #ffffff; --bg-secondary: #f4f4f5; --bg-card: #ffffff; --text-primary: #111827; --text-secondary:#6b7280; --border: #e5e7eb; --accent: #3b82f6; --accent-hover: #2563eb; --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); /* Toggle button */ --toggle-bg: #e5e7eb; --toggle-icon: "☀️"; } /* Browser prefers dark — apply before any JS loads (no flash) */ @media (prefers-color-scheme: dark) { :root { --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-card: #1e293b; --text-primary: #f1f5f9; --text-secondary:#94a3b8; --border: #334155; --accent: #60a5fa; --accent-hover: #93c5fd; --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --toggle-bg: #334155; --toggle-icon: "🌙"; } } /* Manual overrides — these win over the media query */ [data-theme="light"] { --bg-primary: #ffffff; --bg-secondary: #f4f4f5; --bg-card: #ffffff; --text-primary: #111827; --text-secondary:#6b7280; --border: #e5e7eb; --accent: #3b82f6; --accent-hover: #2563eb; --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); --toggle-bg: #e5e7eb; --toggle-icon: "☀️"; } [data-theme="dark"] { --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-card: #1e293b; --text-primary: #f1f5f9; --text-secondary:#94a3b8; --border: #334155; --accent: #60a5fa; --accent-hover: #93c5fd; --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --toggle-bg: #334155; --toggle-icon: "🌙"; } /* Smooth transition when toggling */ *, *::before, *::after { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* ---- Toggle Button ---- */ .theme-toggle { background: var(--toggle-bg); border: 1px solid var(--border); border-radius: 9999px; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; font-size: 1.1rem; line-height: 1; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--accent); } /* Hide the inactive icon */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: none; } /* Light mode → show sun (so user can switch TO dark) */ :root .theme-toggle .icon-sun, [data-theme="light"] .theme-toggle .icon-sun { display: inline; } /* Dark mode → show moon (so user can switch TO light) */ @media (prefers-color-scheme: dark) { :root .theme-toggle .icon-moon { display: inline; } :root .theme-toggle .icon-sun { display: none; } } [data-theme="dark"] .theme-toggle .icon-moon { display: inline; } [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-sun { display: inline; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } /* ---- Fixed position — top right, desktop only ---- */ .theme-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 1000; } /* Hide on mobile — OS preference handles it */ @media (max-width: 768px) { .theme-toggle { display: none; } } /* ---- Global link colors ---- */ a { color: var(--accent); transition: color 0.2s ease; } a:hover { color: var(--accent-hover); } a:visited { color: var(--text-secondary); }