color mode docs created

src/html/components/_head.astro

@@ -16,13 +16,15 @@ const cssPath = isRtl ? '.rtl' : ''
 <!-- OPTIONAL LINKS -->
 
 <!-- Google Font: Source Sans Pro -->
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet">
 
-<!-- overlayScrollbars -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.0.3/styles/overlayscrollbars.min.css" integrity="sha256-57dSpDS5wv9AYEEmLxcPfrVnygNCdqDWOXyoR46L9H0=" crossorigin="anonymous">
+<!-- overlayscrollbars -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/styles/overlayscrollbars.min.css" integrity="sha256-LWLZPJ7X1jJLI5OG5695qDemW1qQ7lNdbTfQ64ylbUY=" crossorigin="anonymous">
 
-<!-- Font Awesome -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css" integrity="sha256-Z1K5uhUaJXA7Ll0XrZ/0JhX4lAtZFpT6jkKrEDT0drU=" crossorigin="anonymous">
+<!-- @fortawesome/fontawesome-free -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.3.0/css/all.min.css" integrity="sha256-/4UQcSmErDzPCMAiuOiWPVVsNN2s3ZY/NsmXNcj0IFc=" crossorigin="anonymous">
 
 <!-- REQUIRED LINKS -->
 

src/html/components/_scripts.astro

@@ -3,8 +3,8 @@ const { path } = Astro.props
 const distPath = (path != undefined) ? path : '../../../dist'
 ---
 <!-- OPTIONAL SCRIPTS -->
-<!-- overlayScrollbars -->
-<script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.0.3/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-/dwBbLeVyyWBtWfH3jHdL2oVVmLKoGnEFzoOSL3nJC0=" crossorigin="anonymous"></script>
+<!-- overlayscrollbars -->
+<script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-NRZchBuHZWSXldqrtAOeCZpucH/1n1ToJ3C8mSK95NU=" crossorigin="anonymous"></script>
 
 <!-- OPTIONAL SCRIPT For Bootstrap 5 -->
 <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
@@ -36,64 +36,3 @@ const distPath = (path != undefined) ? path : '../../../dist'
     }
   })
 </script>
-
-<!-- DON'T USE THIS IN PRODUCTION -->
-<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>

src/html/components/dashboard/_sidenav.astro

@@ -162,6 +162,7 @@ const htmlPath = (path != undefined) ? '.' : '..'
             </li>
           </ul>
         </li>
+
         <li class="nav-header">EXAMPLES</li>
         <li class="nav-item">
           <a href="javascript:;" class="nav-link">
@@ -186,6 +187,15 @@ const htmlPath = (path != undefined) ? '.' : '..'
             </li>
           </ul>
         </li>
+
+        <li class="nav-header">DOCUMENTATIONS</li>
+        <li class="nav-item">
+          <a href={htmlPath + '/docs/color-mode.html'} class="nav-link">
+            <i class="nav-icon fa-solid fa-star-half-stroke"></i>
+            <p>Color Mode</p>
+          </a>
+        </li>
+
         <li class="nav-header">MULTI LEVEL EXAMPLE</li>
         <li class="nav-item">
           <a href="javascript:;" class="nav-link">

src/html/components/dashboard/_topbar.astro

@@ -17,8 +17,8 @@ const distPath = (path != undefined) ? path : '../../../dist'
         <a href="#" class="nav-link">Contact</a>
       </li>
     </ul>
-
     <!-- End navbar links -->
+
     <ul class="navbar-nav ms-auto">
       <!-- Navbar Search -->
       <li class="nav-item">
@@ -155,36 +155,6 @@ const distPath = (path != undefined) ? path : '../../../dist'
           </li>
         </ul>
       </li>
-      <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>
       <!-- TODO tackel in v4.1 -->
       <!-- <li class="nav-item">
         <a class="nav-link" data-widget="fullscreen" href="#" role="button">

src/html/components/docs/color-mode/navbar-html.md

@@ -0,0 +1,80 @@
+```html
+<!-- Navbar -->
+<nav class="app-header 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>
+```

src/html/components/docs/color-mode/toggle-script.md

@@ -0,0 +1,48 @@
+```js
+// 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)
+        })
+      })
+  })
+})()
+```

src/html/pages/docs/color-mode.astro

@@ -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>

src/scss/_docs.scss

@@ -0,0 +1,4 @@
+.lte-code-snippet .astro-code {
+  padding: 1.5rem;
+  @include border-radius($border-radius);
+}

src/scss/parts/_core.scss

@@ -9,3 +9,4 @@
 @import "../app-main";
 @import "../app-footer";
 @import "../dropdown";
+@import "../docs";