/* theme.css — shared light/dark mode for all dashboards Uses CSS-filter inversion on so existing hardcoded colors keep working. Images, charts (canvas), videos, iframes and .no-invert elements are re-inverted so they render with their original colors. Hook: (set by theme.js before paint to avoid FOUC). */ html[data-theme="dark"] { background: #0f1218; filter: invert(0.92) hue-rotate(180deg); } /* Re-invert media and explicitly-opted-out elements so they look correct. */ html[data-theme="dark"] img, html[data-theme="dark"] video, html[data-theme="dark"] canvas, html[data-theme="dark"] iframe, html[data-theme="dark"] picture, html[data-theme="dark"] svg.no-invert, html[data-theme="dark"] .no-invert, html[data-theme="dark"] [data-no-invert] { filter: invert(1) hue-rotate(180deg); } /* Theme toggle button — injected by theme.js into each page's topbar. Lives outside the inverted layer logically, but inversion is fine on it. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 8px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 8px; background: #F3F4F6; color: #1A1D2E; cursor: pointer; font-size: 15px; line-height: 1; transition: background 0.15s, transform 0.15s; -webkit-user-select: none; user-select: none; flex-shrink: 0; } .theme-toggle:hover { background: #E5E7EB; transform: scale(1.05); } .theme-toggle:active { transform: scale(0.95); } .theme-toggle .sun { display: none; } .theme-toggle .moon { display: inline; } html[data-theme="dark"] .theme-toggle .sun { display: inline; } html[data-theme="dark"] .theme-toggle .moon { display: none; }