|
|
@@ -0,0 +1,227 @@
|
|
|
+---
|
|
|
+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>
|
Daniel