/*! * 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); }); } }); })();