---
import Head from "@components/_head.astro";
import Footer from "@components/dashboard/_footer.astro";
import Topbar from "@components/dashboard/_topbar.astro";
import Sidenav from "@components/dashboard/_sidenav.astro";
import Scripts from "@components/_scripts.astro";
import ColorMode from "@components/docs/color-mode.mdx";

const title = "Color Mode | AdminLTE 4";
const path = "../../../dist";
const mainPage = "docs";
const page = "color-mode";
---

<!DOCTYPE html>
<html lang="en">
  <!--begin::Head-->
  <head>
    <Head title={title} path={path} />
  </head>
  <!--end::Head-->
  <!--begin::Body-->
  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
      <Sidenav path={path} mainPage={mainPage} page={page} />
      <!--begin::App Main-->
      <main class="app-main">
        <!--begin::App Content Header-->
        <div class="app-content-header">
          <!--begin::Container-->
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
              <div class="col-sm-6">
                <h3 class="mb-0">Color Mode Toggle</h3>
              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
                  <li class="breadcrumb-item active" aria-current="page">
                    Color Mode
                  </li>
                </ol>
              </div>
            </div>
            <!--end::Row-->
          </div>
          <!--end::Container-->
        </div>
        <!--end::App Content Header-->
        <!--begin::App Content-->
        <div class="app-content">
          <!--begin::Container-->
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row g-4">
              <div class="col-12">
                <div class="callout callout-info">
                  <h5 class="fw-bold">Tips</h5>
                  <p>
                    <a href="https://getbootstrap.com/docs/5.3/customize/color-modes/" target="_blank" rel="noopener noreferrer" class="callout-link">
                      Color modes in Bootstrap
                    </a> allow you to switch between light and dark modes. You can do this using the data-bs-theme attribute. You can also create your own custom color modes.

                  </p>
                </div>
              </div>
              <!-- Start column -->
              <div class="col-12">
                <!--begin::Header-->
                <nav class="navbar navbar-expand bg-body">
                  <!--begin::Container-->
                  <div class="container-fluid">
                    <!--begin::Start Navbar links-->
                    <ul class="navbar-nav">
                      <li class="nav-item">
                        <a
                          class="nav-link"
                          data-lte-toggle="sidebar"
                          href="#"
                          role="button"><i class="bi bi-list"></i></a
                        >
                      </li>
                      <li class="nav-item d-none d-md-block">
                        <a href="#" class="nav-link">Home</a>
                      </li>
                      <li class="nav-item d-none d-md-block">
                        <a href="#" class="nav-link">Contact</a>
                      </li>
                    </ul>
                    <!--end::Start Navbar links-->
                    <!--begin::End Navbar links-->
                    <ul class="navbar-nav ms-auto">
                      <li class="nav-item dropdown">
                        <button
                          class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
                          id="bd-theme"
                          type="button"
                          aria-expanded="false"
                          data-bs-toggle="dropdown"
                          data-bs-display="static"
                        >
                          <span class="theme-icon-active">
                            <i class="my-1"></i>
                          </span>
                          <span class="d-lg-none ms-2" id="bd-theme-text"
                            >Toggle theme</span
                          >
                        </button>
                        <ul
                          class="dropdown-menu dropdown-menu-end"
                          aria-labelledby="bd-theme-text"
                          style="--bs-dropdown-min-width: 8rem;"
                        >
                          <li>
                            <button
                              type="button"
                              class="dropdown-item d-flex align-items-center active"
                              data-bs-theme-value="light"
                              aria-pressed="false"
                            >
                              <i class="bi bi-sun-fill me-2"></i>
                              Light
                              <i class="bi bi-check-lg ms-auto d-none"></i>
                            </button>
                          </li>
                          <li>
                            <button
                              type="button"
                              class="dropdown-item d-flex align-items-center"
                              data-bs-theme-value="dark"
                              aria-pressed="false"
                            >
                              <i class="bi bi-moon-fill me-2"></i>
                              Dark
                              <i class="bi bi-check-lg ms-auto d-none"></i>
                            </button>
                          </li>
                          <li>
                            <button
                              type="button"
                              class="dropdown-item d-flex align-items-center"
                              data-bs-theme-value="auto"
                              aria-pressed="true"
                            >
                              <i class="bi bi-circle-fill-half-stroke me-2"
                              ></i>
                              Auto
                              <i class="bi bi-check-lg ms-auto d-none"></i>
                            </button>
                          </li>
                        </ul>
                      </li>
                    </ul>
                    <!--end::End Navbar links-->
                  </div>
                  <!--end::Container-->
                </nav>
                <!--end::Header-->
              </div>
              <!-- Start column -->
              <div class="col-12">
                <ColorMode />
              </div>
            </div>
            <!--end::Row-->
          </div>
          <!--end::Container-->
        </div>
        <!--end::App Content-->
      </main>
      <!--end::App Main-->
      <Footer />
    </div>
    <!--end::App Wrapper-->

    <Scripts path={path} />

    <script is:inline>
      // Color Mode Toggler
      (() => {
        "use strict";

        const storedTheme = localStorage.getItem("theme");

        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;
          }

          const themeSwitcherText = document.querySelector("#bd-theme-text");
          const activeThemeIcon = document.querySelector(
            ".theme-icon-active i"
          );
          const btnToActive = document.querySelector(
            `[data-bs-theme-value="${theme}"]`
          );
          const svgOfActiveBtn = btnToActive
            .querySelector("i")
            .getAttribute("class");

          for (const element of document.querySelectorAll(
            "[data-bs-theme-value]"
          )) {
            element.classList.remove("active");
            element.setAttribute("aria-pressed", "false");
          }

          btnToActive.classList.add("active");
          btnToActive.setAttribute("aria-pressed", "true");
          activeThemeIcon.setAttribute("class", 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());

          for (const toggle of document.querySelectorAll(
            "[data-bs-theme-value]"
          )) {
            toggle.addEventListener("click", () => {
              const theme = toggle.getAttribute("data-bs-theme-value");
              localStorage.setItem("theme", theme);
              setTheme(theme);
              showActiveTheme(theme, true);
            });
          }
        });
      })();
    </script>
    <!--end::Script-->
  </body><!--end::Body-->
</html>
