cmsmanage/static/bootstrap-color-toggle.js

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