/** * Dark mode — overrides CSS variables defined in css/common.css. * * Applies when is set by js/dark-mode.js. * Designed to be a drop-in override: only touches variables. Page-specific * styles inherit automatically. */ [data-theme="dark"] { /* Backgrounds */ --bg-primary: #0f1218; --bg-secondary: #161a23; --bg-tertiary: #1a1f2a; --bg-card: #1a1f2a; --bg-glass: #1a1f2a; --bg-accent: #161a23; --bg-hover: #232938; /* Borders */ --border-color: #2a3142; --border-secondary: #353d52; /* Text */ --text-primary: #e6e8ee; --text-secondary: #a8b0c0; --text-muted: #7a8294; /* Accents — slightly brighter for contrast on dark */ --accent-primary: #8b87ff; --accent-secondary: #00d4ff; --accent-tertiary: #00d4ff; --accent-pink: #ff7eb3; --accent-success: #2ad97a; --accent-warning: #ffaa3d; --accent-error: #ff5378; /* Gradients — keep mostly same hues, they read well on dark */ --gradient-primary: linear-gradient(135deg, #8b87ff 0%, #635bff 100%); --gradient-secondary: linear-gradient(135deg, #00d4ff 0%, #8b87ff 100%); --gradient-text: linear-gradient(135deg, #e6e8ee 0%, #8b87ff 100%); /* Hover & interactive */ --hover-bg: #232938; --hover-border: #8b87ff; /* Shadows — softer on dark, more spread */ --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25); --shadow-md: 0 4px 6px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3); --shadow-lg: 0 13px 27px -5px rgba(0,0,0,.5), 0 8px 16px -8px rgba(0,0,0,.4); --shadow-xl: 0 30px 60px -12px rgba(0,0,0,.6), 0 18px 36px -18px rgba(0,0,0,.5); --shadow-glow: 0 0 0 4px rgba(139, 135, 255, 0.18); --shadow-glow-secondary: 0 0 0 4px rgba(0, 212, 255, 0.18); color-scheme: dark; } /* Body itself — explicit because some styles in common.css set color on body */ [data-theme="dark"] body { background: var(--bg-primary); color: var(--text-primary); } /* Cards, panels, modals: many components hardcode white. Patch the most common selectors so unmodified components still look ok in dark mode. */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-muted); } [data-theme="dark"] hr { border-color: var(--border-color); } /* Tables */ [data-theme="dark"] table { color: var(--text-primary); } [data-theme="dark"] th { background: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] td { border-color: var(--border-color); } /* Buttons — only target ones that don't already have a background gradient set */ [data-theme="dark"] button:not([class*="primary"]):not([class*="gradient"]):not([class*="brand"]) { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); } /* Code / pre blocks */ [data-theme="dark"] code, [data-theme="dark"] pre { background: var(--bg-tertiary); color: var(--text-primary); } /* Images & PDF canvases — softer brightness on dark to avoid glare */ [data-theme="dark"] .pdf-page-canvas, [data-theme="dark"] canvas.pdf-canvas { filter: brightness(0.92); } /* Theme toggle button (when injected by header agent) */ #theme-toggle { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } #theme-toggle:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--accent-primary); } #theme-toggle:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } #theme-toggle svg { display: block; } /* No transitions during initial paint to avoid theme flicker — but smooth thereafter */ .theme-transitions-ready, .theme-transitions-ready * { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }