/* ===================================================================== Amrich UI — Dark mode bridge Loaded after theme-engine.css and mascot.css. THE BUG THIS FIXES ------------------ theme-engine.css contained: html[data-th-bg="on"] body { background-color: transparent !important; background-image: none !important; } html[data-th-bg="on"] { background: ; } and the app's own dark mode contained: html[data-mode="dark"] body { background-color: var(--bg) !important; } Both rules are `!important` and have identical specificity, so the one that loads later wins — and ui-theme.php is included immediately before , i.e. after darkmode.css. The theme therefore blanked the dark body and painted a light gradient on underneath it. Only the handful of elements darkmode.css names explicitly (.card, table, input, .floating-nav …) went dark. Everything else stayed light. That is the "dark mode only darkens a few areas" report, exactly. THE FIX ------- Light and dark are decided in one place. theme-engine.js writes data-th-dark="1" onto when EITHER the page's own switch says dark (data-mode="dark") OR the active theme is a dark theme. Everything below keys off that, so the theme's surfaces and the page's surfaces can no longer disagree. Two dark palettes, because there are two situations: • The app pages ship a designed warm-espresso dark mode. There, the theme adopts THOSE colours, so a themed surface sits next to a darkmode.css surface and they match. • A web page with a dark theme and no page-level dark mode gets a neutral dark tinted with the theme's own accent. `color-scheme: dark` does the rest: the browser's default canvas, form controls, scrollbars and text selection all follow, which covers every region no stylesheet happens to name. ===================================================================== */ /* ===================================================================== 1. THE SHARED SWITCH ===================================================================== */ html[data-th-dark="1"] { color-scheme: dark; } /* ===================================================================== 2. APP PAGES — adopt the portal's warm espresso palette These are the values from attendance-submission/darkmode.css, so a theme-painted surface and a darkmode.css-painted surface are the same colour rather than two different darks side by side. ===================================================================== */ html[data-mode="dark"] { --th-bg1: #170f0a; --th-bg2: #1c130c; --th-bg3: #241811; --th-card: #241811; --th-ink: #f3e2cf; --th-ink-soft: #cba080; --th-line: #3a2717; } /* ===================================================================== 3. WEB PAGES — a neutral dark, tinted by the theme's own accent Only applies where the page has no dark mode of its own to defer to. ===================================================================== */ html[data-th-dark="1"]:not([data-mode]) { --th-bg1: #0e131b; --th-bg2: #131a24; --th-bg3: #0b1017; --th-card: #18202b; --th-ink: #e6edf6; --th-ink-soft: #9fb0c4; --th-line: #26313f; } @supports (background: color-mix(in srgb, red 50%, blue)) { html[data-th-dark="1"]:not([data-mode]) { --th-bg1: color-mix(in srgb, var(--th-accent) 9%, #0d1219); --th-bg2: color-mix(in srgb, var(--th-accent) 5%, #121924); --th-bg3: color-mix(in srgb, var(--th-accent2) 8%, #0a0f16); --th-card: color-mix(in srgb, var(--th-accent) 6%, #171f2a); --th-line: color-mix(in srgb, var(--th-accent) 14%, #253040); } } /* ===================================================================== 4. THE BACKDROP The accent washes have to come down a long way in the dark or the page glows. They are also painted on a fixed, composited layer rather than with background-attachment: fixed — see the note in theme-engine.css. ===================================================================== */ html[data-th-dark="1"][data-th-bg="on"]::before { background: radial-gradient(58vmax 46vmax at 8% -6%, color-mix(in srgb, var(--th-accent) 13%, transparent), transparent 70%), radial-gradient(52vmax 44vmax at 96% 104%, color-mix(in srgb, var(--th-accent3) 11%, transparent), transparent 70%), linear-gradient(160deg, var(--th-bg1) 0%, var(--th-bg2) 45%, var(--th-bg3) 100%); } @supports not (background: color-mix(in srgb, red 50%, blue)) { html[data-th-dark="1"][data-th-bg="on"]::before { background: linear-gradient(160deg, var(--th-bg1) 0%, var(--th-bg2) 45%, var(--th-bg3) 100%); } } html[data-th-dark="1"][data-th-bg="on"]:not(.th-own-bg) { background-color: var(--th-bg1); } /* Nothing here touches the page's own body background any more — see the long note in theme-engine.css. The ink colour is only supplied where the page never set one. */ html[data-th-dark="1"][data-th-bg="on"]:not(.th-own-bg) body { color: var(--th-ink); } /* ===================================================================== 5. THE LONG TAIL darkmode.css names about forty selectors. Everything it does not name stayed white — that is the other half of "only a few areas go dark". These are the structural containers common across the portal. Scoped to `.th-dark-fill`, which theme-engine.js sets in exactly two situations: • the page asked for dark with data-mode="dark" but only covers some of its own elements — these fill in the rest; • the page has no background of its own at all, so the theme is supplying the dark and should supply the surfaces too. A page that is DESIGNED dark — the admin dashboard, the app home screen — gets neither. It already knows what its cards should look like, and repainting them in the theme's dark instead of its own would be the same overreach that broke the backgrounds, one level down. ===================================================================== */ html.th-dark-fill { --bs-body-bg: var(--th-bg1); --bs-body-color: var(--th-ink); --bs-border-color: var(--th-line); } html.th-dark-fill :where( .card, .module, .panel, .box, .widget, .tile, .sheet, .surface, .form-container, .form-wrap, .content-wrap, .container-card, .dashboard-container, .table-wrapper, .table-container, .controls-container, .controls-wrapper, .stat-card, .count-card, .info-card, .summary-card, .section-card, .modal-content, .dropdown-menu, .list-group-item, .accordion-item, .accordion-body, .offcanvas ) { background-color: var(--th-card); border-color: var(--th-line); color: var(--th-ink); } html.th-dark-fill :where( .top-bar, .topbar, .app-bar, .app-header, .page-header, .sticky-header, .toolbar, .navbar, .subnav, .tabs, .tab-bar, .breadcrumb ) { border-color: var(--th-line); } html.th-dark-fill :where(table) { color: var(--th-ink); } html.th-dark-fill :where(thead th) { background-color: var(--th-bg3); color: var(--th-ink); border-color: var(--th-line); } html.th-dark-fill :where(td, th) { border-color: var(--th-line); } html.th-dark-fill :where(tbody tr:nth-child(even)) > td { background-color: color-mix(in srgb, var(--th-ink) 4%, transparent); } html.th-dark-fill :where(input, select, textarea) { background-color: var(--th-bg3); border-color: var(--th-line); color: var(--th-ink); } html.th-dark-fill :where(input, textarea)::placeholder { color: var(--th-ink-soft); } html.th-dark-fill :where(hr, .divider, .separator) { border-color: var(--th-line); } html.th-dark-fill :where(.text-muted, .muted, small.muted, .subtitle, .hint) { color: var(--th-ink-soft); } /* Anything still painted a hard white by an inline style or a utility class would burn a hole in a dark page. These are the exact literals the portal uses, remapped rather than blanket-inverted. */ html.th-dark-fill :where( [style*="background:#fff"], [style*="background: #fff"], [style*="background:white"], [style*="background: white"], [style*="background-color:#fff"], [style*="background-color: #fff"] ) { background-color: var(--th-card) !important; } html.th-dark-fill :where(.bg-white, .bg-light) { background-color: var(--th-card) !important; color: var(--th-ink); } /* Shadows read as grey haze on a dark page; deepen them instead. */ html.th-dark-fill :where(.card, .modal-content, .sheet, .panel) { box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .7); } /* ===================================================================== 6. THE THEME'S OWN FURNITURE ===================================================================== */ html[data-th-dark="1"] #thBubble, html[data-th-dark="1"] #thAppSheet, html[data-th-dark="1"] #thThemeDock .th-dock-panel { background: var(--th-card); color: var(--th-ink); border-color: var(--th-line); } html[data-th-dark="1"] #thAppPet { background: var(--th-card); border-color: var(--th-line); } html[data-th-dark="1"] #thAppSheet .th-app-pet { background: rgba(255, 255, 255, .06); } html[data-th-dark="1"] #thAppSheet .th-app-pet.th-active { background: rgba(255, 255, 255, .1); } html[data-th-dark="1"] #thAppSheet .th-theme-note { background: rgba(255, 255, 255, .06); } html[data-th-dark="1"] .th-mascot-picker .th-mp-tile { background: rgba(255, 255, 255, .06); } html[data-th-dark="1"] .th-mascot-picker .th-mp-tile.th-active { background: rgba(255, 255, 255, .1); } /* The mascot's speech bubble tail and the toast follow the card colour */ html[data-th-dark="1"] #thToast { background: var(--th-accent); color: #fff; } /* ===================================================================== 7. IMAGES AND ICONS A photo should not be dimmed, but a white-on-transparent logo vanishes. Only the elements that opt in are touched. ===================================================================== */ html[data-th-dark="1"] :where(.invert-on-dark, [data-th-invert]) { filter: invert(1) hue-rotate(180deg); }