/* Light theme overrides. Dark (the existing look) stays the default — this file only kicks in when is set. */ [data-theme="light"] { --bg: #FAFAFA; --bg-alt: #F2F2F2; --surface: #FFFFFF; --surface-2: #ECECEC; --border: rgba(0, 0, 0, 0.10); --border-strong: rgba(0, 0, 0, 0.24); --text: #121212; --text-muted: #555555; --text-faint: #8A8A8A; --accent: #000000; --accent-dim: rgba(0, 0, 0, 0.08); } /* The hero code editor stays pinned dark in both themes on purpose — it's meant to look like an actual dark-mode editor window, not repaint with the page. Without this it would go white and the syntax colors (yellow strings, cyan vars) would lose all contrast. */ [data-theme="light"] .editor { --surface: #121212; --border: rgba(255, 255, 255, 0.10); --text: #F2F2F2; --text-faint: #656565; } /* Theme toggle button */ .nav__theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text); cursor: pointer; flex-shrink: 0; } .nav__theme-btn svg { width: 16px; height: 16px; } .nav__theme-btn .icon-moon { display: none; } [data-theme="light"] .nav__theme-btn .icon-sun { display: none; } [data-theme="light"] .nav__theme-btn .icon-moon { display: inline-block; } /* Smooth the switch instead of a hard flash */ body, .editor, .skill-card, .project-card, .contact-card, .nav { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } /* ========================================================================== FIXES: the base stylesheet hardcodes a few colors instead of using variables, on the assumption that --accent is always light and the page is always near-black. These break in light mode, so we patch them here rather than editing style.css directly. ========================================================================== */ /* Nav bar background was hardcoded to rgba(6,6,6,0.88) — always dark. */ [data-theme="light"] .nav { background: rgba(250, 250, 250, 0.88); } /* Buttons/selection/skip-link set text color to a hardcoded near-black, assuming their background (var(--accent)) is always light. In light mode --accent flips to black, so the text needs to flip to white too. */ [data-theme="light"] .btn--primary, [data-theme="light"] ::selection, [data-theme="light"] .skip-link { color: #FFFFFF; } [data-theme="light"] .btn--primary:hover { background: #262626; } /* Status-dot pulse glow was hardcoded to a white ring — invisible on a light page. Swap to a dark ring when the dot itself is black. */ [data-theme="light"] .status-dot, [data-theme="light"] .exp-row__dot { animation-name: pulse-dot-light; } @keyframes pulse-dot-light { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.25); } 50% { opacity: 0.55; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0); } }