body.theme-client { --page: #f6f8fc; } .theme-client .brand-mark { background: linear-gradient(145deg, #3479ff, #174ad0); border-radius: 10px; box-shadow: 0 7px 16px rgba(40, 100, 232, .22); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* Theme toggle icon swap — CSS-driven so it stays correct on first paint (before ops-console.js runs) and after every toggle, with no JS involved. */ .ds-theme-icon-light { display: none; } :root[data-theme="dark"] .ds-theme-icon-dark { display: none; } :root[data-theme="dark"] .ds-theme-icon-light { display: inline-block; } /* * Dark theme — additive override layer, fires only under [data-theme="dark"] * (set on by the theme toggle in ops-console.js). Light mode — the * mockup default — is completely untouched by this block. * * Most of layout.css/components.css already reads color through the design * tokens below, so redefining the tokens re-themes the majority of the shell, * cards, tables, nav and typography automatically. A short list of selectors * hardcode a light-mode hex value instead of a token (`.btn`, `.topbar`, * `.data-table th`, `.badge.*`, etc.) and get explicit dark equivalents. */ :root[data-theme="dark"] { --page: #0b1220; --surface: #111a2c; --surface-muted: #0e1728; --border: #24314a; --border-strong: #34435f; --ink-950: #f4f7fc; --ink-900: #e3e9f4; --ink-700: #c2cee0; --ink-600: #9aa8c2; --ink-500: #7f8dab; --ink-400: #61708c; --ink-300: #3d4a67; --ink-200: #2a3752; --ink-100: #1c2740; --ink-50: #141d33; --blue-50: rgba(40, 100, 232, .16); --blue-100: rgba(40, 100, 232, .28); --blue-500: #5b93ff; --blue-600: #4c86ff; --blue-700: #85acff; --green-50: rgba(28, 173, 98, .16); --green-100: rgba(28, 173, 98, .3); --green-700: #4fd989; --amber-50: rgba(242, 139, 0, .16); --amber-100: rgba(242, 139, 0, .3); --amber-700: #ffb648; --red-50: rgba(237, 59, 79, .16); --red-100: rgba(237, 59, 79, .3); --red-700: #ff8792; --violet-50: rgba(138, 72, 235, .18); --violet-100: rgba(138, 72, 235, .32); --violet-700: #b78dfb; --cyan-50: rgba(11, 159, 212, .18); --cyan-100: rgba(11, 159, 212, .32); --cyan-700: #6fd3f4; --pink-50: rgba(230, 45, 122, .18); --pink-700: #ff8fbc; --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3); --shadow-sm: 0 2px 7px rgba(0, 0, 0, .35); --shadow-md: 0 12px 28px rgba(0, 0, 0, .45); } :root[data-theme="dark"] .topbar { background: rgba(17, 26, 44, .92); } :root[data-theme="dark"] .global-search { background: var(--ink-50); border-color: var(--border); } :root[data-theme="dark"] .key { background: var(--ink-100); border-color: var(--border-strong); } :root[data-theme="dark"] .nav-label { color: #5c6a86; } :root[data-theme="dark"] .nav-link { color: var(--ink-600); } :root[data-theme="dark"] .btn { color: var(--ink-700); background: var(--ink-100); } :root[data-theme="dark"] .btn:hover { border-color: var(--border-strong); } :root[data-theme="dark"] .field, :root[data-theme="dark"] .select, :root[data-theme="dark"] .toolbar { background: var(--ink-50); } :root[data-theme="dark"] .data-table th { color: var(--ink-500); background: var(--surface); border-bottom-color: var(--border); } :root[data-theme="dark"] .data-table tbody tr:hover { background: var(--ink-100); } :root[data-theme="dark"] .metric-icon, :root[data-theme="dark"] .entity-icon { color: #7fabff; background: rgba(40, 100, 232, .18); } :root[data-theme="dark"] .timeline-dot { border-color: var(--surface); box-shadow: 0 0 0 1px var(--border-strong); } :root[data-theme="dark"] .step-index { background: var(--surface); border-color: var(--border-strong); } :root[data-theme="dark"] .notification-ping { border-color: var(--surface); } :root[data-theme="dark"] .badge.success { color: #4fd989; background: rgba(28, 173, 98, .16); } :root[data-theme="dark"] .badge.warning { color: #ffb648; background: rgba(242, 139, 0, .16); } :root[data-theme="dark"] .badge.danger { color: #ff8792; background: rgba(237, 59, 79, .16); } :root[data-theme="dark"] .badge.info { color: #7fabff; background: rgba(40, 100, 232, .18); } :root[data-theme="dark"] .badge.violet { color: #b78dfb; background: rgba(138, 72, 235, .18); } :root[data-theme="dark"] .badge.neutral { color: var(--ink-500); background: var(--ink-100); } /* ops-console.css (loaded before the kit) sets `.empty { background: #f8fafc }` and kit's own `.empty` rule never declares a background at all — so nothing in the light-mode cascade overrides it, and every DcpComponents.emptyState() block (Recent Activity, Recent Deliveries, Workers, every list/table empty state) kept a hardcoded light box with near-invisible light-on-light text once the rest of the shell went dark. Verified visually: 30-dark-dashboard.png / 31-dark-delivery-jobs.png. */ :root[data-theme="dark"] .empty { background: transparent; color: var(--ink-500); } /* ops-console.css's `.panel` (Sites/Collections legacy shell) and the whole of cinema-directory.css hardcode light-mode hex colors with no token usage at all — the Cinema Directory master-detail panel (list pane, detail pane, tabs, record cards, overview grid, badges) was completely unreadable in dark mode: white panels/cards with light-gray text on the dark shell background. */ :root[data-theme="dark"] .panel { background: var(--surface); } :root[data-theme="dark"] .cinema-directory-toolbar, :root[data-theme="dark"] .cinema-detail-header { border-bottom-color: var(--border); } :root[data-theme="dark"] .cinema-filters, :root[data-theme="dark"] .filters { background: var(--surface-muted); border-bottom-color: var(--border); } :root[data-theme="dark"] .filters label { color: var(--ink-500); } :root[data-theme="dark"] .cinema-list-pane { background: var(--surface-muted); border-right-color: var(--border); } :root[data-theme="dark"] .cinema-list-item:hover { background: var(--ink-100); border-color: var(--border-strong); } :root[data-theme="dark"] .cinema-list-item.selected { background: var(--blue-50); border-color: var(--blue-100); box-shadow: inset 3px 0 var(--blue-600); } :root[data-theme="dark"] .cinema-list-meta, :root[data-theme="dark"] .cinema-pagination, :root[data-theme="dark"] .cinema-record-meta, :root[data-theme="dark"] .cinema-overview-item span, :root[data-theme="dark"] .cinema-tab, :root[data-theme="dark"] .cinema-server-screen h4, :root[data-theme="dark"] .cinema-form-help, :root[data-theme="dark"] .cinema-loading-cover, :root[data-theme="dark"] .cinema-detail-placeholder { color: var(--ink-500); } :root[data-theme="dark"] .cinema-pagination { border-top-color: var(--border); } :root[data-theme="dark"] .cinema-detail-pane { background: var(--surface); } :root[data-theme="dark"] .cinema-detail-placeholder b, :root[data-theme="dark"] .cinema-empty b { color: var(--ink-700); } :root[data-theme="dark"] .cinema-tabs { border-bottom-color: var(--border); } :root[data-theme="dark"] .cinema-tab.active { color: var(--blue-700); border-bottom-color: var(--blue-600); } :root[data-theme="dark"] .cinema-record, :root[data-theme="dark"] .cinema-overview-item, :root[data-theme="dark"] .cinema-empty { background: var(--surface-muted); border-color: var(--border); } :root[data-theme="dark"] .cinema-form-section { border-top-color: var(--border); color: var(--ink-700); } :root[data-theme="dark"] .destination-preview { background: var(--surface-muted); border-color: var(--border); color: var(--ink-700); } :root[data-theme="dark"] .destination-preview.loading { color: var(--ink-600); } :root[data-theme="dark"] .destination-preview.error, :root[data-theme="dark"] .form-error { background: var(--red-50); border-color: var(--red-100); color: var(--red-700); } :root[data-theme="dark"] .badge.expired, :root[data-theme="dark"] .badge.retired, :root[data-theme="dark"] .badge.conflict { color: var(--red-700); background: var(--red-50); } :root[data-theme="dark"] .badge.needs-review { color: var(--amber-700); background: var(--amber-50); } :root[data-theme="dark"] .badge.active, :root[data-theme="dark"] .badge.ready { color: var(--green-700); background: var(--green-50); } :root[data-theme="dark"] .badge.inactive, :root[data-theme="dark"] .badge.missing { color: var(--ink-500); background: var(--ink-100); } /* modals.css: every other selector reads color through the tokens above and re-themes automatically (.modal-panel via --surface/--border, .modal-head-icon via --blue-700/--blue-50, .form-label via --ink-700, etc.) -- .section-label is the one place that hardcodes a light-mode hex instead of a token. */ :root[data-theme="dark"] .section-label { color: #5c6a86; } /* modals.css's job-detail additions: .card.secondary .tile hardcodes a light-mode white background instead of reading --surface. */ :root[data-theme="dark"] .card.secondary .tile { background: var(--surface); }