/* ============================================================================= * Dark theme — token overrides * ----------------------------------------------------------------------------- * Activated by setting `data-theme="dark"` on . * `data-bs-theme="dark"` is also set so Bootstrap 5.3+ adopts its dark scheme. * * Only colors are overridden. Spacing, radii, motion, type scale stay the same. * Hard-coded `#fff` / `#fafafa` etc. in legacy stylesheets are patched at the * bottom of this file with scoped selectors. * ============================================================================= */ [data-theme="dark"] { /* Brand stays the same hue, slightly lifted for contrast on dark bg */ --md-primary: #64B5F6; --md-primary-hover: #90CAF9; --md-primary-dark: #1E88E5; --md-on-primary: #0D2440; --md-accent: #FFB74D; --md-accent-hover: #FFA726; --md-success: #66BB6A; --md-warning: #FFCA28; --md-danger: #EF5350; --md-info: #4FC3F7; /* Soft status containers — dark-mode tints (low-saturation, dark base, light text). */ --md-primary-container: #143459; --md-on-primary-container: #BBDEFB; --md-success-container: #1B3A1F; --md-on-success-container: #A5D6A7; --md-warning-container: #3E2E00; --md-on-warning-container: #FFE082; --md-danger-container: #4A1416; --md-on-danger-container: #FFCDD2; --md-info-container: #0E2E47; --md-on-info-container: #B3E5FC; /* Surfaces — Material 3 dark theme elevation tints */ --md-bg: #0F1115; --md-surface: #181B22; --md-surface-2: #1E2128; --md-surface-3: #232730; --md-divider: #2A2E37; --md-border: #2F343F; --md-on-surface: #E6E8ED; --md-on-surface-2: #B6BAC4; --md-on-surface-3: #8B909A; --md-on-surface-4: #6B6F78; /* State layers — lighter overlays on dark surfaces */ --md-state-hover: rgba(255,255,255,.06); --md-state-press: rgba(255,255,255,.12); --md-state-tint: rgba(100,181,246,.14); /* Elevation — softer shadows + 1px border highlight (M3 dark recipe) */ --elev-0: none; --elev-1: 0 1px 2px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.04); --elev-2: 0 2px 6px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.05); --elev-3: 0 4px 12px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06); --elev-4: 0 8px 24px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.06); --elev-5: 0 16px 40px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.07); color-scheme: dark; } /* ── Patches for legacy hard-coded colors ─────────────────────────────────── */ [data-theme="dark"] body { background: var(--md-bg); color: var(--md-on-surface); } /* Generic white cards and inputs */ [data-theme="dark"] .card, [data-theme="dark"] .modal-content, [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .list-group-item, [data-theme="dark"] .accordion-item { background-color: var(--md-surface); color: var(--md-on-surface); border-color: var(--md-border); } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] .input-group-text { background-color: var(--md-surface-2); color: var(--md-on-surface); border-color: var(--md-border); } [data-theme="dark"] .form-control::placeholder { color: var(--md-on-surface-4); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: var(--md-surface-2); color: var(--md-on-surface); border-color: var(--md-primary); box-shadow: 0 0 0 .2rem var(--md-state-tint); } [data-theme="dark"] .table { --bs-table-bg: var(--md-surface); --bs-table-color: var(--md-on-surface); --bs-table-border-color: var(--md-border); --bs-table-striped-bg: var(--md-surface-2); --bs-table-hover-bg: rgba(255,255,255,.04); } [data-theme="dark"] hr, [data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-start, [data-theme="dark"] .border-end { border-color: var(--md-border) !important; } [data-theme="dark"] .text-muted { color: var(--md-on-surface-3) !important; } [data-theme="dark"] .text-dark { color: var(--md-on-surface) !important; } [data-theme="dark"] .bg-white { background-color: var(--md-surface) !important; } [data-theme="dark"] .bg-light { background-color: var(--md-surface-2) !important; } /* Bootstrap navbar — light navbar on dark page */ [data-theme="dark"] .navbar-light, [data-theme="dark"] .public-nav { background-color: var(--md-surface) !important; border-bottom: 1px solid var(--md-border); } [data-theme="dark"] .public-nav .navbar-brand, [data-theme="dark"] .public-nav .nav-link { color: var(--md-on-surface) !important; } [data-theme="dark"] .public-nav .nav-link:hover { background: var(--md-state-hover); color: var(--md-on-surface) !important; } [data-theme="dark"] .public-nav .nav-link.active { background: var(--md-state-tint); color: var(--md-primary) !important; } /* Public footer */ [data-theme="dark"] .public-footer { background: #06080B; color: var(--md-on-surface-2); } /* Dashboard sidebar / topbar */ [data-theme="dark"] .sidebar { background: var(--md-surface); border-right: 1px solid var(--md-border); } [data-theme="dark"] .sidebar-menu li a { color: var(--md-on-surface-2); } [data-theme="dark"] .sidebar-menu li a:hover { background: var(--md-state-hover); color: var(--md-on-surface); } [data-theme="dark"] .sidebar-menu li a.active { background: var(--md-state-tint); color: var(--md-primary); } [data-theme="dark"] .sidebar-brand { background: var(--md-surface-2); border-bottom: 1px solid var(--md-border); color: var(--md-on-surface); } [data-theme="dark"] .menu-label { color: var(--md-on-surface-3); } [data-theme="dark"] .topbar { background: var(--md-surface); border-bottom: 1px solid var(--md-border); } /* Worker UI patches — was full of pure whites/greys */ [data-theme="dark"] body.worker-body, [data-theme="dark"] .worker-app { background: var(--md-bg); color: var(--md-on-surface); } [data-theme="dark"] .worker-card, [data-theme="dark"] .topbar { background: var(--md-surface); border-color: var(--md-border); } [data-theme="dark"] .ws-row { border-color: var(--md-border); } [data-theme="dark"] .ws-meta { color: var(--md-on-surface-3); } [data-theme="dark"] .photo-tile { background: var(--md-surface-2); border-color: var(--md-border); color: var(--md-on-surface-3); } [data-theme="dark"] .photo-tile.add { background: var(--md-surface-2); } [data-theme="dark"] .photo-tile.uploading{ background: rgba(100,181,246,.10); } [data-theme="dark"] .remark-row { border-left-color: var(--md-border); } [data-theme="dark"] .remark-row.critical { background: rgba(239,83,80,.12); } [data-theme="dark"] .skeleton { background: var(--md-surface-2); border-color: var(--md-border); } /* Auth / login splash — was deep blue, keep but darker */ [data-theme="dark"] .err-illustration { background: #0a1929; color: var(--md-on-surface-3); } /* Material chip tints — keep light pastel on dark for legibility, but slightly desaturate so they don't glow */ [data-theme="dark"] .wash-dry, [data-theme="dark"] .chip-dry, [data-theme="dark"] .pill-dry { background: #1F3A5F; color: #BBDEFB; } [data-theme="dark"] .wash-pressure, [data-theme="dark"] .chip-pressure, [data-theme="dark"] .pill-pressure { background: #1E3F23; color: #C8E6C9; } [data-theme="dark"] .wash-interior, [data-theme="dark"] .chip-interior, [data-theme="dark"] .pill-interior { background: #4A2E0E; color: #FFE0B2; } /* Bootstrap badges keep their semantic colors — no override needed */ /* Code / pre */ [data-theme="dark"] code, [data-theme="dark"] pre { background: var(--md-surface-2); color: var(--md-on-surface); border-color: var(--md-border); } /* DataTables / Select2 — common third-party styles */ [data-theme="dark"] .dataTables_wrapper, [data-theme="dark"] .dataTables_wrapper .dataTables_length, [data-theme="dark"] .dataTables_wrapper .dataTables_filter, [data-theme="dark"] .dataTables_wrapper .dataTables_info, [data-theme="dark"] .dataTables_wrapper .dataTables_processing, [data-theme="dark"] .dataTables_wrapper .dataTables_paginate { color: var(--md-on-surface-2) !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--md-on-surface) !important; background: var(--md-surface) !important; border-color: var(--md-border) !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current, [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--md-state-tint) !important; color: var(--md-primary) !important; } [data-theme="dark"] .select2-container--bootstrap-5 .select2-selection { background: var(--md-surface-2); border-color: var(--md-border); color: var(--md-on-surface); } [data-theme="dark"] .select2-dropdown { background: var(--md-surface); border-color: var(--md-border); color: var(--md-on-surface); } [data-theme="dark"] .select2-results__option--highlighted { background: var(--md-state-tint) !important; color: var(--md-primary) !important; } /* Leaflet maps — invert tiles so they fit dark UI without re-skinning */ [data-theme="dark"] .leaflet-tile-pane { filter: invert(.92) hue-rotate(180deg) brightness(.95) contrast(.92); } /* Theme-toggle button */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-pill); color: inherit; cursor: pointer; transition: background var(--motion-fast) var(--easing-standard); } .theme-toggle:hover { background: var(--md-state-hover); } .theme-toggle .material-icons { font-size: 22px; } /* When used inside the dashboard topbar, inherit topbar-icon sizing */ .theme-toggle.topbar-icon { width: 40px; height: 40px; border: 0; padding: 0; color: var(--md-on-surface-2); } .theme-toggle.topbar-icon .material-icons { font-size: 24px; } [data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,.08); } /* ============================================================================= * Public SEO pages — inline