/* Mission Metrics — global dark/light theme layer. Pages opt in by including this file + /lib/theme.js. The theme is driven by the data-theme attribute on . Default (light) = each page's own CSS. Dark = remap the common CSS variables + a baseline + structural overrides. */ /* pre-paint guard: hide content on a dark canvas until the first dark pass runs, so there's no light flash. theme.js removes .mm-prepaint after normalising (with a safety timeout so it can never stay hidden). */ html[data-theme="dark"]{ background:#0e1116; } html[data-theme="dark"].mm-prepaint{ visibility:hidden !important; } html[data-theme="dark"]{ color-scheme: dark; /* surfaces / backgrounds */ --bg:#0e1116; --bg-primary:#0e1116; --bg-secondary:#161b22; --bg-tertiary:#1f2630; --bg-card:#161b22; --card-color:#161b22; --card:#161b22; --bg-hover:#1f2630; --bg-soft:#161b22; --surface:#161b22; --panel:#161b22; /* text */ --text:#e6edf3; --text-primary:#e6edf3; --text-secondary:#aeb6c2; --text-muted:#8b949e; --muted:#8b949e; --ink:#e6edf3; /* lines */ --border:#30363d; --line:#30363d; --border-soft:#283039; /* navy is used as a dark surface AND as text on many pages; keep it dark for surfaces, and fix text separately via the baseline below */ --navy:#0b1220; --navy-soft:#11182a; --navy-deep:#070b14; /* shadows softer on dark */ --shadow-md:0 2px 10px rgba(0,0,0,.5); --shadow:0 2px 10px rgba(0,0,0,.5); } /* Baseline so even hardcoded pages get a dark canvas + readable text */ html[data-theme="dark"] body{ background:#0e1116; color:#e6edf3; } /* Common structural containers that often hardcode a white background. Specificity (html[data-theme] .class) beats a plain .class rule, so no !important needed; inline style="background:#fff" still wins (per-page touch-up). */ html[data-theme="dark"] .card, html[data-theme="dark"] .kpi, html[data-theme="dark"] .panel, html[data-theme="dark"] .box, html[data-theme="dark"] .tile, html[data-theme="dark"] .cell, html[data-theme="dark"] .stat, html[data-theme="dark"] .module, html[data-theme="dark"] .section{ background:#161b22; border-color:#30363d; color:#e6edf3; } html[data-theme="dark"] table td, html[data-theme="dark"] table th{ border-color:#30363d; } html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea{ background:#0e1116; color:#e6edf3; border-color:#30363d; } html[data-theme="dark"] hr{ border-color:#30363d; } /* ───── the floating theme control (always visible, not themed away) ───── */ /* docked BOTTOM-CENTER — clear of the left menu/sidebar, corner FABs, and header. */ #mm-theme-ctl{ position:fixed; left:50%; bottom:12px; transform:translateX(-50%); z-index:2147483000; display:flex; flex-direction:row; gap:6px; align-items:center; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; } #mm-theme-ctl button{ font-size:11.5px; font-weight:700; padding:7px 12px; border-radius:999px; border:1px solid rgba(0,0,0,.15); background:#ffffff; color:#1B2A4A; cursor:pointer; box-shadow:0 3px 14px rgba(0,0,0,.22); line-height:1; white-space:nowrap; opacity:.88; transition:opacity .15s; } #mm-theme-ctl button:hover{ opacity:1; } #mm-theme-ctl #mm-theme-all{ font-size:10.5px; font-weight:600; } html[data-theme="dark"] #mm-theme-ctl button{ background:#161b22; color:#e6edf3; border-color:#30363d; box-shadow:0 3px 14px rgba(0,0,0,.55); } @media print{ #mm-theme-ctl{ display:none; } }