mirror of
https://github.com/pi-hole/web.git
synced 2026-08-23 14:51:12 +01:00
646a3ef6ab
Reviewed and built on top of a round of fixes already applied to the working tree (boxed layout, badge alignment, sidebar treeview links, bootstrap5-toggle's on/off->onlabel/offlabel rename, and forcing data-bs-theme explicitly instead of leaving Bootstrap 5 to fall back to the OS's prefers-color-scheme, plus the new scripts/js/theme.js that locks the resolved theme so AdminLTE's own color-mode logic can't silently override Pi-hole's own theme selection). On top of that: - Fixed the "day theme still shows dark" gap: the anti-FOUC inline background style in header.lp only covered the case where the theme is unconditionally dark, never the "auto" theme (whose Lua-side flag is literally the string "auto", not "dark") - added a prefers-color-scheme media query fallback so the auto theme also avoids a white flash without needing to wait for theme.js/CSS to load. - Fixed a strict Content-Security-Policy (img-src 'self', set by FTL's webserver) blocking every checkbox/radio checkmark, the modal close button, and the select2 dropdown arrow/clear icon: Bootstrap 5 and its plugins ship these as inline data: URI SVGs, which the CSP rejects outright. Re-hosted the exact same icons as local files under style/icons/ and pointed the same CSS custom properties at them. Learned the hard way that a url() stored in a custom property resolves relative to the stylesheet that *consumes* it via var(), not the one that declares it - the consumer here is always vendor/adminLTE/adminlte.min.css, so the override paths needed to account for that rather than being relative to pi-hole.css itself. - Found and fixed three more leftover .box-* selectors in pi-hole.css that never got updated to .card-* during the earlier card-conversion phase: the query-types/forward-destinations pie chart flex layout, the domains-list filter row header, and the dynamically-generated settings cards' sizing/hidden-state selectors - all on pages that render in normal use, unlike the handful of genuinely-unreachable .box-solid/.box-comment selectors left alone in the theme files (those modifier classes are never applied by any current markup). Verified against a live container: boxed layout now visibly constrains and centers the page, day theme renders light content with checkmarks/ close icons/dropdown arrows all visible with zero console errors, clicking Settings/Tools now expands the submenu instead of navigating to the dashboard, and sidebar badges are aligned to a consistent right edge. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Signed-off-by: Adam Warner <me@adamwarner.co.uk>
45 lines
1.4 KiB
JavaScript
45 lines
1.4 KiB
JavaScript
/* Pi-hole: A black hole for Internet advertisements
|
|
* (c) 2017 Pi-hole, LLC (https://pi-hole.net)
|
|
* Network-wide ad blocking via your own hardware.
|
|
*
|
|
* This file is copyright under the latest version of the EUPL.
|
|
* Please see LICENSE file for your rights under this license. */
|
|
|
|
"use strict";
|
|
|
|
const currentBsTheme = document.documentElement.dataset.bsTheme;
|
|
let lockedTheme = currentBsTheme;
|
|
|
|
const setAutoTheme = () => {
|
|
lockedTheme = globalThis.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
document.documentElement.dataset.bsTheme = lockedTheme;
|
|
localStorage.setItem("theme", lockedTheme);
|
|
};
|
|
|
|
if (currentBsTheme === "auto") {
|
|
setAutoTheme();
|
|
// Listen for OS theme changes
|
|
globalThis.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
|
|
setAutoTheme();
|
|
});
|
|
} else {
|
|
// Sync Pi-hole's explicitly configured theme to localStorage
|
|
localStorage.setItem("theme", lockedTheme);
|
|
}
|
|
|
|
// Lock the theme aggressively so AdminLTE cannot override it based on OS preferences
|
|
const observer = new MutationObserver(mutations => {
|
|
for (const mutation of mutations) {
|
|
if (
|
|
mutation.attributeName === "data-bs-theme" &&
|
|
document.documentElement.dataset.bsTheme !== lockedTheme
|
|
) {
|
|
document.documentElement.dataset.bsTheme = lockedTheme;
|
|
}
|
|
}
|
|
});
|
|
observer.observe(document.documentElement, {
|
|
attributes: true,
|
|
attributeFilter: ["data-bs-theme"],
|
|
});
|