cmsmanage/static/bootstrap-color-toggle.js

98 lines
2.8 KiB
JavaScript

/*!
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2011-2023 The Bootstrap Authors
* Modified by Adam Goldsmith
* Licensed under the Creative Commons Attribution 3.0 Unported License.
*/
(() => {
"use strict";
const getStoredTheme = () => localStorage.getItem("theme");
const setStoredTheme = (theme) => localStorage.setItem("theme", theme);
const getPreferredTheme = () => {
const storedTheme = getStoredTheme();
if (storedTheme) {
return storedTheme;
}
return window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
};
const setTheme = (theme) => {
if (
theme === "auto" &&
window.matchMedia("(prefers-color-scheme: dark)").matches
) {
document.documentElement.dataset.bsTheme = "dark";
} else {
document.documentElement.dataset.bsTheme = theme;
}
};
setTheme(getPreferredTheme());
const showActiveTheme = (theme, focus = false) => {
const themeSwitcher = document.querySelector("#bd-theme");
if (!themeSwitcher) {
return;
}
const themeSwitcherText = document.querySelector("#bd-theme-text");
const activeThemeIcon = document.querySelector(".theme-icon-active");
const buttonToActive = document.querySelector(
`[data-bs-theme-value="${theme}"]`,
);
const activeIcon = [
...buttonToActive.querySelector(".theme-icon").classList,
].find((c) => c.startsWith("bi-"));
for (const element of document.querySelectorAll("[data-bs-theme-value]")) {
element.classList.remove("active");
element.setAttribute("aria-pressed", "false");
}
buttonToActive.classList.add("active");
buttonToActive.setAttribute("aria-pressed", "true");
for (const icon of activeThemeIcon.classList) {
if (icon.startsWith("bi-")) {
activeThemeIcon.classList.remove(icon);
}
}
activeThemeIcon.classList.add(activeIcon);
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${buttonToActive.dataset.bsThemeValue})`;
themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
if (focus) {
themeSwitcher.focus();
}
};
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", () => {
const storedTheme = getStoredTheme();
if (storedTheme !== "light" && storedTheme !== "dark") {
setTheme(getPreferredTheme());
}
});
window.addEventListener("DOMContentLoaded", () => {
console.log(getPreferredTheme());
showActiveTheme(getPreferredTheme());
for (const toggle of document.querySelectorAll("[data-bs-theme-value]")) {
toggle.addEventListener("click", () => {
const theme = toggle.dataset.bsThemeValue;
setStoredTheme(theme);
setTheme(theme);
showActiveTheme(theme, true);
});
}
});
})();