/* * assets/css/themes.css — Theme Overrides * * Purpose: CSS custom property overrides for each named theme. * Applied via [data-theme="X"] on the element. * Themes: light (default), dark, nord-midnight, papyrus, dracula * Last Updated: 2026-03-26 */ /* ─── Light (Default) ─────────────────────────────────────────── */ [data-theme="light"] { --bg: #f0f4f8; --surface: #ffffff; --surface2: #f1f5f9; --border: #e2e8f0; --ink: #1e293b; --muted: #64748b; --accent: #3b82f6; --accent2: #16a34a; --danger: #dc2626; --warning: #d97706; --info: #0284c7; --sidebar-bg: #1e293b; --shadow: 0 1px 3px rgba(0,0,0,.08); } /* ─── Dark ────────────────────────────────────────────────────── */ /* GitHub-inspired deep neutral dark — easy on the eyes under fluorescent light */ [data-theme="dark"] { --bg: #0d1117; --surface: #161b22; --surface2: #21262d; --border: #30363d; --ink: #e6edf3; --muted: #8b949e; --accent: #58a6ff; --accent2: #3fb950; --danger: #f85149; --warning: #e3b341; --info: #79c0ff; --sidebar-bg: #010409; --shadow: 0 1px 4px rgba(0,0,0,.4); } [data-theme="dark"] .main-content::after { color: rgba(255,255,255,.10); } /* ─── Nord Midnight ───────────────────────────────────────────── */ /* Deep Arctic navy — Nord's cool blue-grey palette over a midnight sea */ [data-theme="nord-midnight"] { --bg: #1a2332; --surface: #212e40; --surface2: #2a3850; --border: #344560; --ink: #d5e3f0; --muted: #6080a0; --accent: #72b8d8; --accent2: #88be88; --danger: #c05060; --warning: #c8a050; --info: #6aaec8; --sidebar-bg: #101828; --shadow: 0 1px 4px rgba(0,0,0,.35); } [data-theme="nord-midnight"] .main-content::after { color: rgba(255,255,255,.10); } /* ─── Papyrus ─────────────────────────────────────────────────── */ /* Warm parchment — reduces blue-light fatigue for long clinical sessions */ [data-theme="papyrus"] { --bg: #f0e8d8; --surface: #faf4e8; --surface2: #ecdfc8; --border: #c8b090; --ink: #3a2810; --muted: #806040; --accent: #7a5030; --accent2: #486838; --danger: #a83020; --warning: #906020; --info: #305878; --sidebar-bg: #281808; --shadow: 0 1px 3px rgba(58,40,16,.15); } [data-theme="papyrus"] .main-content::after { color: rgba(58,40,16,.08); } /* ─── Dracula ─────────────────────────────────────────────────── */ /* Classic Dracula — vivid purple-grey with pastel accents */ [data-theme="dracula"] { --bg: #282a36; --surface: #2d2f3e; --surface2: #393b4d; --border: #44475a; --ink: #f8f8f2; --muted: #6272a4; --accent: #bd93f9; --accent2: #50fa7b; --danger: #ff5555; --warning: #ffb86c; --info: #8be9fd; --sidebar-bg: #21222c; --shadow: 0 1px 4px rgba(0,0,0,.4); } [data-theme="dracula"] .main-content::after { color: rgba(255,255,255,.10); }