/* ══════════════════════════════════════════ THEMES — applied via data-theme on ══════════════════════════════════════════ */ /* 1. Midnight (default) — pure black developer dark */ [data-theme="midnight"], :root { --bg-primary: #000000; --bg-secondary: #111111; --bg-tertiary: #1a1a1a; --bg-hover: #2a2a2a; --text-primary: #ffffff; --text-secondary:#a0a0a0; --text-tertiary: #666666; --border-color: #2a2a2a; } /* 2. Ocean — #05749C brand blue */ [data-theme="ocean"] { --bg-primary: #03303f; --bg-secondary: #044255; --bg-tertiary: #05536b; --bg-hover: #06657f; --text-primary: #e8f4f8; --text-secondary:#8bbfcf; --text-tertiary: #5a90a8; --border-color: #0b6a8a; } /* 3. Light — clean white/cream for bright-mode users */ [data-theme="light"] { --bg-primary: #f9f9f7; --bg-secondary: #ffffff; --bg-tertiary: #f0f0ee; --bg-hover: #e8e8e4; --text-primary: #111111; --text-secondary:#555555; --text-tertiary: #999999; --border-color: #dedede; } /* 4. GitHub Dark — beloved by devs, VS Code default dark */ [data-theme="github-dark"] { --bg-primary: #0d1117; --bg-secondary: #161b22; --bg-tertiary: #21262d; --bg-hover: #30363d; --text-primary: #e6edf3; --text-secondary:#8b949e; --text-tertiary: #484f58; --border-color: #30363d; } /* 5. Solarized Dark — classic, easy on the eyes */ [data-theme="solarized"] { --bg-primary: #002b36; --bg-secondary: #073642; --bg-tertiary: #094554; --bg-hover: #0e5868; --text-primary: #fdf6e3; --text-secondary:#839496; --text-tertiary: #586e75; --border-color: #0e5868; } /* 6. Nord — cool nordic grays, hugely popular with devs */ [data-theme="nord"] { --bg-primary: #242933; --bg-secondary: #2e3440; --bg-tertiary: #3b4252; --bg-hover: #434c5e; --text-primary: #eceff4; --text-secondary:#9099a8; --text-tertiary: #616e88; --border-color: #3b4252; } /* 7. Dracula — perennially popular dark theme */ [data-theme="dracula"] { --bg-primary: #1a1b26; --bg-secondary: #282a36; --bg-tertiary: #313344; --bg-hover: #3d3f56; --text-primary: #f8f8f2; --text-secondary:#9b9db8; --text-tertiary: #6272a4; --border-color: #3d3f56; } /* 8. Catppuccin Mocha — newest darling of the dev community */ [data-theme="catppuccin"] { --bg-primary: #1e1e2e; --bg-secondary: #181825; --bg-tertiary: #313244; --bg-hover: #45475a; --text-primary: #cdd6f4; --text-secondary:#a6adc8; --text-tertiary: #585b70; --border-color: #313244; } /* ── Theme swatches ── */ .theme-swatch { width: 32px; height: 32px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .15s; flex-shrink: 0; } .theme-swatch:hover { transform: scale(1.15); } .theme-swatch.active { box-shadow: 0 0 0 2px var(--accent-color); transform: scale(1.1); }