wilson.silva
/
AdminLte
kopia lustrzana https://github.com/almasaeed2010/AdminLTE


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
							---
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 docs-page">
    <!--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-half 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 globalThis.matchMedia("(prefers-color-scheme: dark)").matches ?
      "dark" :
      "light"
  }

  const setTheme = function (theme) {
    if (
      theme === "auto" &&
            globalThis.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()
    }
  }

  globalThis
          .matchMedia("(prefers-color-scheme: dark)")
          .addEventListener("change", () => {
            if (storedTheme !== "light" || storedTheme !== "dark") {
              setTheme(getPreferredTheme())
            }
          })

  globalThis.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>