/* ============================================================= theme.css — design tokens + switchable themes Loaded FIRST on every page (before nav/dashboard/editor/auth css). How it works ------------ Every page's CSS references semantic tokens (var(--bg), var(--text), var(--accent), …) instead of hard-coded hexes. A theme is just a set of ~20 base-colour values; the "soft" badge/alert colours are DERIVED from those with color-mix(), so adding or tweaking a theme never means hand-listing every tint. Switch theme by setting `data-theme` on (see theme.js). The default (no attribute) is Mocha — the editor's original palette, so the IDE looks byte-for-byte as before. Four themes, chosen from beloved developer palettes (fitting for a coding platform): Mocha (dark violet), Latte (light), Nord (cool dark), Rosé Pine Dawn (warm light). ============================================================= */ /* ---- Base tokens : DEFAULT = Catppuccin Mocha (the editor look) ---- */ :root, :root[data-theme="mocha"] { --bg: #1e1e2e; /* page background / code area */ --panel: #181825; /* side panels, toolbars, cards */ --surface-0: #313244; /* raised controls + subtle borders */ --surface-1: #45475a; /* stronger borders + raised hover */ --surface-2: #585b70; /* dim icons, line numbers, labels */ --text: #cdd6f4; /* primary text */ --text-muted: #a6adc8; /* secondary text */ --text-subtle: #6c7086; /* tertiary text / disabled */ --accent: #cba6f7; /* primary accent (links, active, cursor)*/ --accent-hover: #d9b3ff; --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent); --green: #a6e3a1; /* run button, success */ --green-hover: #94e2a0; --blue: #89b4fa; /* info, defs, headings */ --red: #f38ba8; /* danger, delete */ --yellow: #f9e2af; /* warning, read-only badge */ --peach: #fab387; /* numbers */ --sky: #89dceb; /* builtins, operators */ --readonly-bg: #1d1914; /* warm amber tint (viewing past work) */ --readonly-chrome: #171410; --shadow: rgba(0, 0, 0, 0.35); /* Text that sits ON a solid accent/green/red fill. In every theme the accents are picked so the page background is the readable contrast. */ --on-accent: var(--bg); /* ---- Derived semantic tokens (auto-adapt to the theme above) ---- */ --success: var(--green); --warning: var(--yellow); --danger: var(--red); --info: var(--blue); /* Soft tinted backgrounds + readable "ink" for badges & alerts. color-mix re-resolves per theme because it references the tokens above. */ --success-soft: color-mix(in srgb, var(--green) 16%, transparent); --success-ink: color-mix(in srgb, var(--green), var(--text) 28%); --warning-soft: color-mix(in srgb, var(--yellow) 16%, transparent); --warning-ink: color-mix(in srgb, var(--yellow), var(--text) 28%); --danger-soft: color-mix(in srgb, var(--red) 16%, transparent); --danger-ink: color-mix(in srgb, var(--red), var(--text) 22%); --info-soft: color-mix(in srgb, var(--blue) 16%, transparent); --info-ink: color-mix(in srgb, var(--blue), var(--text) 26%); } /* ---- Catppuccin Latte (light) ---- */ :root[data-theme="latte"] { --bg: #eff1f5; --panel: #e6e9ef; --surface-0: #ccd0da; --surface-1: #bcc0cc; --surface-2: #acb0be; --text: #4c4f69; --text-muted: #5c5f77; --text-subtle: #8c8fa1; --accent: #8839ef; --accent-hover: #7a2fd8; --green: #40a02b; --green-hover: #379923; --blue: #1e66f5; --red: #d20f39; --yellow: #df8e1d; --peach: #fe640b; --sky: #04a5e5; --readonly-bg: #faf3e0; --readonly-chrome: #f2e9d0; --shadow: rgba(0, 0, 0, 0.12); } /* ---- Nord (cool dark) ---- */ :root[data-theme="nord"] { --bg: #2e3440; --panel: #272b35; --surface-0: #3b4252; --surface-1: #434c5e; --surface-2: #4c566a; --text: #e5e9f0; --text-muted: #a6b0c4; --text-subtle: #6d7a94; --accent: #88c0d0; --accent-hover: #8fbcbb; --green: #a3be8c; --green-hover: #b1c99b; --blue: #81a1c1; --red: #bf616a; --yellow: #ebcb8b; --peach: #d08770; --sky: #8fbcbb; --readonly-bg: #3b352b; --readonly-chrome: #322d25; --shadow: rgba(0, 0, 0, 0.4); } /* ---- Rosé Pine Dawn (warm light) ---- */ :root[data-theme="rose-pine-dawn"] { --bg: #faf4ed; --panel: #fffaf3; --surface-0: #f2e9e1; --surface-1: #dfdad9; --surface-2: #cecacd; --text: #575279; --text-muted: #797593; --text-subtle: #9893a5; --accent: #907aa9; --accent-hover: #7e6a96; --green: #56949f; /* foam — teal reads as positive */ --green-hover: #468490; --blue: #286983; /* pine */ --red: #b4637a; /* love */ --yellow: #ea9d34; /* gold */ --peach: #d7827e; /* rose */ --sky: #56949f; --readonly-bg: #fdf6ea; --readonly-chrome: #f6ecdc; --shadow: rgba(0, 0, 0, 0.1); } /* ============================================================= Theme switcher control (lives in the topbar; see theme.js) ============================================================= */ .theme-switch { position: relative; flex-shrink: 0; } .theme-switch-btn { display: inline-flex; align-items: center; gap: 0.35rem; background: none; border: 1px solid var(--surface-1); border-radius: 4px; color: var(--text-muted); font-size: 0.8rem; padding: 0.3rem 0.6rem; cursor: pointer; white-space: nowrap; min-height: 32px; transition: color 0.15s, border-color 0.15s; } .theme-switch-btn:hover { color: var(--text); border-color: var(--surface-2); } .theme-swatch { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 1px solid var(--surface-2); flex-shrink: 0; } .theme-menu { position: absolute; right: 0; top: calc(100% + 4px); background: var(--panel); border: 1px solid var(--surface-1); border-radius: 6px; box-shadow: 0 6px 20px var(--shadow); padding: 0.3rem; min-width: 160px; z-index: 100; display: flex; flex-direction: column; gap: 0.1rem; } .theme-menu[hidden] { display: none; } .theme-option { display: flex; align-items: center; gap: 0.5rem; background: none; border: none; border-radius: 4px; color: var(--text-muted); font-size: 0.82rem; padding: 0.4rem 0.55rem; cursor: pointer; text-align: left; width: 100%; transition: background 0.12s, color 0.12s; } .theme-option:hover { background: var(--surface-0); color: var(--text); } .theme-option.is-active { color: var(--text); font-weight: 600; } .theme-option.is-active::after { content: '✓'; margin-left: auto; color: var(--accent); } .theme-option .theme-swatch { width: 14px; height: 14px; } /* A standalone switcher for pages without a topbar (login / register). */ .theme-switch-floating { position: fixed; top: 1rem; right: 1rem; z-index: 100; }