zhuliang
/
AdminLTE
mirror of https://github.com/almasaeed2010/AdminLTE.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
							---
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 NavbarHtml from "@components/docs/color-mode/navbar-html.md";
import ToggleScript from "@components/docs/color-mode/toggle-script.md";
const title = "AdminLTE 4 | General Form Elements";
const mainPage = "forms";
const page = "general";
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <Head title={title} />
  </head>
  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <div class="app-wrapper">
      <Topbar />
      <Sidenav mainPage={mainPage} page={page} />
      <!-- Main content -->
      <main class="app-main">
        <div class="app-content-header">
          <div class="container-fluid">
            <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="#">Home</a></li>
                  <li class="breadcrumb-item active" aria-current="page">
                    General Form
                  </li>
                </ol>
              </div>
            </div>
          </div>
        </div>
        <!-- Main content -->
        <div class="app-content">
          <div class="container-fluid">
            <div class="row g-4">
              <!-- Start column -->
              <div class="col-12">
                <!-- Navbar -->
                <nav class="navbar navbar-expand bg-body">
                  <div class="container-fluid">
                    <!-- Start navbar links -->
                    <ul class="navbar-nav">
                      <li class="nav-item">
                        <a
                          class="nav-link"
                          data-lte-toggle="sidebar"
                          href="#"
                          role="button"><i class="fa-solid fa-bars"></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>
                    <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>
                        </button>
                        <ul
                          class="dropdown-menu dropdown-menu-end"
                          aria-labelledby="bd-theme"
                          style="--bs-dropdown-min-width: 8rem;"
                        >
                          <li>
                            <button
                              type="button"
                              class="dropdown-item d-flex align-items-center active"
                              data-bs-theme-value="light"
                            >
                              <i class="fa-regular fa-sun me-2"></i>
                              Light
                              <i class="fa-solid fa-check ms-auto d-none"></i>
                            </button>
                          </li>
                          <li>
                            <button
                              type="button"
                              class="dropdown-item d-flex align-items-center"
                              data-bs-theme-value="dark"
                            >
                              <i class="fa-solid fa-moon me-2"></i>
                              Dark
                              <i class="fa-solid fa-check ms-auto d-none"></i>
                            </button>
                          </li>
                          <li>
                            <button
                              type="button"
                              class="dropdown-item d-flex align-items-center"
                              data-bs-theme-value="auto"
                            >
                              <i class="fa-solid fa-circle-half-stroke me-2"
                              ></i>
                              Auto
                              <i class="fa-solid fa-check ms-auto d-none"></i>
                            </button>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </div>
                </nav>
              </div>
              <!-- Start column -->
              <div class="col-12">
                <div class="lte-code-snippet">
                  <NavbarHtml />
                </div>

                <div class="lte-code-snippet">
                  <ToggleScript />
                </div>
              </div>
            </div>
            <!-- /.row -->
          </div><!-- /.container-fluid -->
        </div>
        <!-- /.content -->
      </main>
      <!-- /.app-content -->

      <Footer />
    </div>
    <!--  ./app-wrapper -->

    <Scripts />

    <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) => {
          const activeThemeIcon = document.querySelector(
            ".theme-icon-active i"
          );
          const btnToActive = document.querySelector(
            '[data-bs-theme-value="' + theme + '"]'
          );
          const svgOfActiveBtn = btnToActive
            .querySelector("i")
            .getAttribute("class");

          document
            .querySelectorAll("[data-bs-theme-value]")
            .forEach((element) => {
              element.classList.remove("active");
            });

          btnToActive.classList.add("active");
          activeThemeIcon.setAttribute("class", svgOfActiveBtn);
        };

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

        window.addEventListener("DOMContentLoaded", () => {
          showActiveTheme(getPreferredTheme());

          document
            .querySelectorAll("[data-bs-theme-value]")
            .forEach((toggle) => {
              toggle.addEventListener("click", () => {
                const theme = toggle.getAttribute("data-bs-theme-value");
                localStorage.setItem("theme", theme);
                setTheme(theme);
                showActiveTheme(theme);
              });
            });
        });
      })();
    </script>
  </body>
</html>