/* ════════════════════════════════ darkmode.css — standalone dark mode Add to index.html : Remove that line to disable entirely. ════════════════════════════════ */ /* Dark mode toggle button */ .dark-toggle { background: none; border: 1px solid var(--border); border-radius: 5px; cursor: pointer; padding: 0.3rem 0.5rem; display: flex; align-items: center; justify-content: center; color: var(--muted); transition: background 0.15s, color 0.15s, border-color 0.15s; flex-shrink: 0; } .dark-toggle:hover { background: var(--hover-bg); color: var(--text); } .dark-toggle svg { display: block; } /* Sun icon — shown in dark mode */ .dark-toggle .icon-sun { display: none; } .dark-toggle .icon-moon { display: block; } [data-theme="dark"] .dark-toggle .icon-sun { display: block; } [data-theme="dark"] .dark-toggle .icon-moon { display: none; } [data-theme="dark"] .github-icon { fill: #e8e8e8; } /* ── Dark theme variables ── */ [data-theme="dark"] { --bg: #0f0f0f; --text: #e8e8e8; --muted: #a0a0a0; --faint: #606060; --border: #2a2a2a; --hover-bg: #1a1a1a; } /* Topbar background in dark mode */ [data-theme="dark"] .topbar { background: rgba(15,15,15,0.96); } [data-theme="dark"] .mobile-nav { background: rgba(15,15,15,0.98); } /* Photo desaturation in dark mode */ [data-theme="dark"] .sidebar-photo img { filter: brightness(0.9) saturate(0.85); } /* GitHub icon adapts to dark mode */ [data-theme="dark"] .github-icon { fill: #e8e8e8; } /* Smooth transition when switching */ body { transition: background 0.2s ease, color 0.2s ease; } .topbar, .mobile-nav, .sidebar, .main { transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }