62523eb02c
* fix: Correctly indicate "auto" theme is default * fix: .pnp.js changes were missing * fix: Use a "-subtle" background color for the menu bar Because those change correctly with theme changes. That the non-"-subtle" ones may be a bs5 bug, but enough people complained about the yellow background in dev mode in dark mode that this change may be worth it. * fix: Try and recolor black colors in SVGs for dark mode * Apply suggestions from @martinthomson
89 lines
2.7 KiB
JavaScript
89 lines
2.7 KiB
JavaScript
/*!
|
|
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
|
|
* Copyright 2011-2023 The Bootstrap Authors
|
|
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
|
*/
|
|
|
|
(() => {
|
|
"use strict";
|
|
|
|
const storedTheme = localStorage.getItem("theme") || "auto";
|
|
|
|
const getPreferredTheme = () => {
|
|
if (storedTheme) {
|
|
return storedTheme;
|
|
}
|
|
|
|
return window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
? "dark"
|
|
: "light";
|
|
};
|
|
|
|
const setTheme = function (theme) {
|
|
if (
|
|
theme === "auto" &&
|
|
window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
) {
|
|
document.documentElement.setAttribute("data-bs-theme", "dark");
|
|
} else {
|
|
document.documentElement.setAttribute("data-bs-theme", theme);
|
|
}
|
|
};
|
|
|
|
setTheme(getPreferredTheme());
|
|
|
|
const showActiveTheme = (theme, focus = false) => {
|
|
const themeSwitcher = document.querySelector("#bd-theme");
|
|
|
|
if (!themeSwitcher) {
|
|
return;
|
|
}
|
|
// Commented-out lines are from the original bs5 js, which uses a more complicated pref dropdown.
|
|
// Kept them here for easier future diffing.
|
|
// const themeSwitcherText = document.querySelector("#bd-theme-text");
|
|
// const activeThemeIcon = document.querySelector(".theme-icon-active use");
|
|
const btnToActive = document.querySelector(
|
|
`[data-bs-theme-value="${theme}"]`
|
|
);
|
|
// const svgOfActiveBtn = btnToActive
|
|
// .querySelector("svg use")
|
|
// .getAttribute("href");
|
|
|
|
document.querySelectorAll("[data-bs-theme-value]").forEach((element) => {
|
|
element.classList.remove("active");
|
|
element.setAttribute("aria-pressed", "false");
|
|
});
|
|
|
|
btnToActive.classList.add("active");
|
|
btnToActive.setAttribute("aria-pressed", "true");
|
|
// activeThemeIcon.setAttribute("href", svgOfActiveBtn);
|
|
// const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
|
|
// themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
|
|
|
|
// if (focus) {
|
|
// themeSwitcher.focus();
|
|
// }
|
|
};
|
|
|
|
window
|
|
.matchMedia("(prefers-color-scheme: dark)")
|
|
.addEventListener("change", () => {
|
|
if (storedTheme !== "light" || storedTheme !== "dark") {
|
|
setTheme(getPreferredTheme());
|
|
}
|
|
});
|
|
|
|
window.addEventListener("DOMContentLoaded", () => {
|
|
showActiveTheme(getPreferredTheme());
|
|
|
|
document.querySelectorAll("[data-bs-theme-value]").forEach((toggle) => {
|
|
toggle.addEventListener("click", () => {
|
|
const theme = toggle.getAttribute("data-bs-theme-value");
|
|
localStorage.setItem("theme", theme);
|
|
setTheme(theme);
|
|
showActiveTheme(theme, true);
|
|
});
|
|
});
|
|
});
|
|
})();
|