npm - admin-lte - Versions diffs - 4.0.0-rc7 → 4.0.0 - Mend

admin-lte 4.0.0-rc7 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (102) hide show

package/CHANGELOG.md +48 -0
package/README.md +43 -17
package/dist/UI/general.html +303 -126
package/dist/UI/icons.html +303 -126
package/dist/UI/timeline.html +303 -126
package/dist/css/adminlte.css +2798 -1167
package/dist/css/adminlte.css.map +1 -1
package/dist/css/adminlte.min.css +2 -2
package/dist/css/adminlte.min.css.map +1 -1
package/dist/css/adminlte.rtl.css +2798 -1167
package/dist/css/adminlte.rtl.css.map +1 -1
package/dist/css/adminlte.rtl.min.css +2 -2
package/dist/css/adminlte.rtl.min.css.map +1 -1
package/dist/docs/browser-support.html +261 -397
package/dist/docs/color-mode.html +242 -382
package/dist/docs/components/main-header.html +238 -374
package/dist/docs/components/main-sidebar.html +253 -389
package/dist/docs/customization.html +1056 -0
package/dist/docs/deployment.html +1121 -0
package/dist/docs/faq.html +857 -409
package/dist/docs/getting-started.html +967 -0
package/dist/docs/how-to-contribute.html +335 -462
package/dist/docs/index.html +16 -0
package/dist/docs/integrations.html +1207 -0
package/dist/docs/introduction.html +453 -446
package/dist/docs/javascript/accessibility.html +361 -491
package/dist/docs/javascript/card-widget.html +446 -450
package/dist/docs/javascript/direct-chat.html +324 -421
package/dist/docs/javascript/fullscreen.html +348 -416
package/dist/docs/javascript/layout.html +345 -436
package/dist/docs/javascript/plugins-overview.html +1120 -0
package/dist/docs/javascript/pushmenu.html +485 -492
package/dist/docs/javascript/treeview.html +466 -400
package/dist/docs/layout-blueprint.html +1063 -0
package/dist/docs/layout.html +287 -415
package/dist/docs/license.html +252 -387
package/dist/docs/migration.html +1125 -0
package/dist/docs/recipes.html +1161 -0
package/dist/docs/rtl.html +933 -0
package/dist/examples/lockscreen.html +65 -1
package/dist/examples/login-v2.html +65 -1
package/dist/examples/login.html +65 -1
package/dist/examples/register-v2.html +65 -1
package/dist/examples/register.html +65 -1
package/dist/forms/{general.html → elements.html} +489 -463
package/dist/forms/layout.html +1243 -0
package/dist/forms/validation.html +1251 -0
package/dist/forms/wizard.html +1386 -0
package/dist/generate/theme.html +134 -4
package/dist/index.html +303 -126
package/dist/index2.html +306 -126
package/dist/index3.html +303 -126
package/dist/js/adminlte.js +5 -5
package/dist/js/adminlte.js.map +1 -1
package/dist/js/adminlte.min.js +2 -2
package/dist/js/adminlte.min.js.map +1 -1
package/dist/layout/collapsed-sidebar-without-hover.html +303 -126
package/dist/layout/collapsed-sidebar.html +303 -126
package/dist/layout/fixed-complete.html +303 -126
package/dist/layout/fixed-footer.html +303 -126
package/dist/layout/fixed-header.html +303 -126
package/dist/layout/fixed-sidebar.html +303 -126
package/dist/layout/layout-custom-area.html +303 -126
package/dist/layout/layout-rtl.html +303 -126
package/dist/layout/logo-switch.html +134 -4
package/dist/layout/sidebar-mini.html +303 -126
package/dist/layout/unfixed-sidebar.html +303 -126
package/dist/mailbox/compose.html +1127 -0
package/dist/mailbox/inbox.html +1477 -0
package/dist/mailbox/read.html +1178 -0
package/dist/pages/404.html +213 -0
package/dist/pages/500.html +201 -0
package/dist/pages/calendar.html +1242 -0
package/dist/pages/chat.html +1403 -0
package/dist/pages/faq.html +1359 -0
package/dist/pages/file-manager.html +1811 -0
package/dist/pages/invoice.html +1175 -0
package/dist/pages/kanban.html +1415 -0
package/dist/pages/maintenance.html +204 -0
package/dist/pages/pricing.html +1255 -0
package/dist/pages/profile.html +1358 -0
package/dist/pages/projects.html +1620 -0
package/dist/pages/settings.html +1363 -0
package/dist/tables/data.html +1295 -0
package/dist/tables/simple.html +303 -126
package/dist/widgets/cards.html +303 -126
package/dist/widgets/info-box.html +303 -126
package/dist/widgets/small-box.html +303 -126
package/netlify.toml +16 -0
package/package.json +29 -23
package/src/scss/_app-header.scss +27 -0
package/src/scss/_app-sidebar.scss +24 -30
package/src/scss/_bootstrap-variables.scss +11 -4
package/src/scss/_docs.scss +816 -0
package/src/scss/_table.scss +4 -4
package/src/scss/adminlte.scss +4 -1
package/src/ts/adminlte.ts +1 -1
package/src/ts/fullscreen.ts +8 -4
package/src/ts/push-menu.ts +66 -5
package/.claude/settings.local.json +0 -37
package/CLAUDE.md +0 -79
package/release.md +0 -75

package/dist/docs/introduction.html CHANGED Viewed

@@ -64,7 +64,7 @@
   </head>
   <!--end::Head-->
   <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <!--begin::App Wrapper-->
     <div class="app-wrapper">
       <!--begin::Header-->
@@ -78,11 +78,18 @@
                 <i class="bi bi-list"></i>
               </a>
             </li>
             <li class="nav-item d-none d-md-block">
-              <a href="#" class="nav-link">Home</a>
+              <a href="../docs/introduction.html" class="nav-link">
+                <i class="bi bi-book me-1" aria-hidden="true"></i>
+                Documentation
+              </a>
             </li>
             <li class="nav-item d-none d-md-block">
-              <a href="#" class="nav-link">Contact</a>
+              <a href="../index.html" class="nav-link">
+                <i class="bi bi-arrow-left me-1" aria-hidden="true"></i>
+                Back to live preview
+              </a>
             </li>
           </ul>
           <!--end::Start Navbar Links-->
@@ -220,11 +227,70 @@
             <li class="nav-item">
               <a class="nav-link" href="#" data-lte-toggle="fullscreen">
                 <i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
-                <i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none"></i>
+                <i data-lte-icon="minimize" class="bi bi-fullscreen-exit d-none"></i>
               </a>
             </li>
             <!--end::Fullscreen Toggle-->
+            <!--begin::Color Mode Toggle (#6010)-->
+            <li class="nav-item dropdown">
+              <a
+                class="nav-link"
+                href="#"
+                id="bd-theme"
+                aria-label="Toggle color scheme"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+              >
+                <i class="bi bi-sun-fill" data-lte-theme-icon="light"></i>
+                <i class="bi bi-moon-fill d-none" data-lte-theme-icon="dark"></i>
+                <i class="bi bi-circle-half d-none" data-lte-theme-icon="auto"></i>
+              </a>
+              <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"
+                    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 active"
+                    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>
+            <!--end::Color Mode Toggle-->
             <!--begin::User Menu Dropdown-->
             <li class="nav-item dropdown user-menu">
               <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -281,24 +347,20 @@
         <!--end::Container-->
       </nav>
       <!--end::Header-->
-      <!--begin::Sidebar-->
+      <!--begin::Sidebar (docs mode)-->
       <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
         <!--begin::Sidebar Brand-->
         <div class="sidebar-brand">
-          <!--begin::Brand Link-->
-          <a href="../index.html" class="brand-link">
-            <!--begin::Brand Image-->
+          <a href="../docs/introduction.html" class="brand-link">
             <img
               src="../assets/img/AdminLTELogo.png"
               alt="AdminLTE Logo"
               class="brand-image opacity-75 shadow"
             />
-            <!--end::Brand Image-->
-            <!--begin::Brand Text-->
-            <span class="brand-text fw-light">AdminLTE 4</span>
-            <!--end::Brand Text-->
+            <span class="brand-text fw-light">
+              AdminLTE 4 <span class="opacity-75">&middot; Docs</span>
+            </span>
           </a>
-          <!--end::Brand Link-->
         </div>
         <!--end::Sidebar Brand-->
         <!--begin::Sidebar Wrapper-->
@@ -309,298 +371,61 @@
               class="nav sidebar-menu flex-column"
               data-lte-toggle="treeview"
               role="navigation"
-              aria-label="Main navigation"
+              aria-label="Documentation navigation"
               data-accordion="false"
-              id="navigation"
+              id="docs-navigation"
             >
+              <li class="nav-header">START HERE</li>
               <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-speedometer"></i>
-                  <p>
-                    Dashboard
-                    <i class="nav-arrow bi bi-chevron-right"></i>
-                  </p>
+                <a href="../docs/introduction.html" class="nav-link active">
+                  <i class="nav-icon bi bi-download"></i>
+                  <p>Installation</p>
                 </a>
-                <ul class="nav nav-treeview">
-                  <li class="nav-item">
-                    <a href="../index.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Dashboard v1</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../index2.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Dashboard v2</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../index3.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Dashboard v3</p>
-                    </a>
-                  </li>
-                </ul>
               </li>
               <li class="nav-item">
-                <a href="../generate/theme.html" class="nav-link">
-                  <i class="nav-icon bi bi-palette"></i>
-                  <p>Theme Generate</p>
+                <a href="../docs/getting-started.html" class="nav-link">
+                  <i class="nav-icon bi bi-rocket-takeoff"></i>
+                  <p>Getting Started</p>
                 </a>
               </li>
+              <li class="nav-header">FOUNDATIONS</li>
               <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-box-seam-fill"></i>
-                  <p>
-                    Widgets
-                    <i class="nav-arrow bi bi-chevron-right"></i>
-                  </p>
+                <a href="../docs/layout.html" class="nav-link">
+                  <i class="nav-icon bi bi-grip-horizontal"></i>
+                  <p>Layout Classes</p>
                 </a>
-                <ul class="nav nav-treeview">
-                  <li class="nav-item">
-                    <a href="../widgets/small-box.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Small Box</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../widgets/info-box.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>info Box</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../widgets/cards.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Cards</p>
-                    </a>
-                  </li>
-                </ul>
               </li>
               <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-clipboard-fill"></i>
-                  <p>
-                    Layout Options
-                    <span class="nav-badge badge text-bg-secondary me-3">7</span>
-                    <i class="nav-arrow bi bi-chevron-right"></i>
-                  </p>
+                <a href="../docs/layout-blueprint.html" class="nav-link">
+                  <i class="nav-icon bi bi-diagram-3"></i>
+                  <p>Layout Blueprint</p>
                 </a>
-                <ul class="nav nav-treeview">
-                  <li class="nav-item">
-                    <a href="../layout/unfixed-sidebar.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Default Sidebar</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../layout/fixed-sidebar.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Fixed Sidebar</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../layout/fixed-header.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Fixed Header</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../layout/fixed-footer.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Fixed Footer</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../layout/fixed-complete.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Fixed Complete</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../layout/layout-custom-area.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Layout <small>+ Custom Area </small></p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../layout/sidebar-mini.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Sidebar Mini</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../layout/collapsed-sidebar.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Sidebar Mini <small>+ Collapsed</small></p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../layout/collapsed-sidebar-without-hover.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Sidebar Mini <small>+ Collapsed + No Hover</small></p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../layout/logo-switch.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Sidebar Mini <small>+ Logo Switch</small></p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../layout/layout-rtl.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Layout RTL</p>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-tree-fill"></i>
-                  <p>
-                    UI Elements
-                    <i class="nav-arrow bi bi-chevron-right"></i>
-                  </p>
-                </a>
-                <ul class="nav nav-treeview">
-                  <li class="nav-item">
-                    <a href="../UI/general.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>General</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../UI/icons.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Icons</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../UI/timeline.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Timeline</p>
-                    </a>
-                  </li>
-                </ul>
               </li>
               <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-pencil-square"></i>
-                  <p>
-                    Forms
-                    <i class="nav-arrow bi bi-chevron-right"></i>
-                  </p>
+                <a href="../docs/customization.html" class="nav-link">
+                  <i class="nav-icon bi bi-palette"></i>
+                  <p>Customization</p>
                 </a>
-                <ul class="nav nav-treeview">
-                  <li class="nav-item">
-                    <a href="../forms/general.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>General Elements</p>
-                    </a>
-                  </li>
-                </ul>
               </li>
               <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-table"></i>
-                  <p>
-                    Tables
-                    <i class="nav-arrow bi bi-chevron-right"></i>
-                  </p>
+                <a href="../docs/color-mode.html" class="nav-link">
+                  <i class="nav-icon bi bi-star-half"></i>
+                  <p>Color Mode</p>
                 </a>
-                <ul class="nav nav-treeview">
-                  <li class="nav-item">
-                    <a href="../tables/simple.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Simple Tables</p>
-                    </a>
-                  </li>
-                </ul>
               </li>
-              <li class="nav-header">EXAMPLES</li>
               <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-box-arrow-in-right"></i>
-                  <p>
-                    Auth
-                    <i class="nav-arrow bi bi-chevron-right"></i>
-                  </p>
+                <a href="../docs/rtl.html" class="nav-link">
+                  <i class="nav-icon bi bi-text-paragraph"></i>
+                  <p>RTL Support</p>
                 </a>
-                <ul class="nav nav-treeview">
-                  <li class="nav-item">
-                    <a href="#" class="nav-link">
-                      <i class="nav-icon bi bi-box-arrow-in-right"></i>
-                      <p>
-                        Version 1
-                        <i class="nav-arrow bi bi-chevron-right"></i>
-                      </p>
-                    </a>
-                    <ul class="nav nav-treeview">
-                      <li class="nav-item">
-                        <a href="../examples/login.html" class="nav-link">
-                          <i class="nav-icon bi bi-circle"></i>
-                          <p>Login</p>
-                        </a>
-                      </li>
-                      <li class="nav-item">
-                        <a href="../examples/register.html" class="nav-link">
-                          <i class="nav-icon bi bi-circle"></i>
-                          <p>Register</p>
-                        </a>
-                      </li>
-                    </ul>
-                  </li>
-                  <li class="nav-item">
-                    <a href="#" class="nav-link">
-                      <i class="nav-icon bi bi-box-arrow-in-right"></i>
-                      <p>
-                        Version 2
-                        <i class="nav-arrow bi bi-chevron-right"></i>
-                      </p>
-                    </a>
-                    <ul class="nav nav-treeview">
-                      <li class="nav-item">
-                        <a href="../examples/login-v2.html" class="nav-link">
-                          <i class="nav-icon bi bi-circle"></i>
-                          <p>Login</p>
-                        </a>
-                      </li>
-                      <li class="nav-item">
-                        <a href="../examples/register-v2.html" class="nav-link">
-                          <i class="nav-icon bi bi-circle"></i>
-                          <p>Register</p>
-                        </a>
-                      </li>
-                    </ul>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../examples/lockscreen.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Lockscreen</p>
-                    </a>
-                  </li>
-                </ul>
               </li>
-              <li class="nav-header">DOCUMENTATIONS</li>
+              <li class="nav-header">BUILDING</li>
               <li class="nav-item">
-                <a href="../docs/introduction.html" class="nav-link active">
-                  <i class="nav-icon bi bi-download"></i>
-                  <p>Installation</p>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a href="../docs/layout.html" class="nav-link">
-                  <i class="nav-icon bi bi-grip-horizontal"></i>
-                  <p>Layout</p>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a href="../docs/color-mode.html" class="nav-link">
-                  <i class="nav-icon bi bi-star-half"></i>
-                  <p>Color Mode</p>
+                <a href="../docs/recipes.html" class="nav-link">
+                  <i class="nav-icon bi bi-clipboard-check"></i>
+                  <p>Recipes</p>
                 </a>
               </li>
               <li class="nav-item">
@@ -630,11 +455,17 @@
                 <a href="#" class="nav-link">
                   <i class="nav-icon bi bi-filetype-js"></i>
                   <p>
-                    Javascript
+                    JavaScript Plugins
                     <i class="nav-arrow bi bi-chevron-right"></i>
                   </p>
                 </a>
                 <ul class="nav nav-treeview">
+                  <li class="nav-item">
+                    <a href="../docs/javascript/plugins-overview.html" class="nav-link">
+                      <i class="nav-icon bi bi-circle"></i>
+                      <p>Overview</p>
+                    </a>
+                  </li>
                   <li class="nav-item">
                     <a href="../docs/javascript/layout.html" class="nav-link">
                       <i class="nav-icon bi bi-circle"></i>
@@ -680,122 +511,83 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a href="../docs/browser-support.html" class="nav-link">
-                  <i class="nav-icon bi bi-browser-edge"></i>
-                  <p>Browser Support</p>
+                <a href="../docs/integrations.html" class="nav-link">
+                  <i class="nav-icon bi bi-puzzle"></i>
+                  <p>Integrations</p>
                 </a>
               </li>
+              <li class="nav-header">SHIPPING</li>
               <li class="nav-item">
-                <a href="../docs/how-to-contribute.html" class="nav-link">
-                  <i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
-                  <p>How To Contribute</p>
+                <a href="../docs/migration.html" class="nav-link">
+                  <i class="nav-icon bi bi-arrow-up-right-square"></i>
+                  <p>Migration from v3</p>
                 </a>
               </li>
               <li class="nav-item">
-                <a href="../docs/faq.html" class="nav-link">
-                  <i class="nav-icon bi bi-question-circle-fill"></i>
-                  <p>FAQ</p>
+                <a href="../docs/deployment.html" class="nav-link">
+                  <i class="nav-icon bi bi-cloud-upload"></i>
+                  <p>Deployment</p>
                 </a>
               </li>
               <li class="nav-item">
-                <a href="../docs/license.html" class="nav-link">
-                  <i class="nav-icon bi bi-patch-check-fill"></i>
-                  <p>License</p>
+                <a href="../docs/browser-support.html" class="nav-link">
+                  <i class="nav-icon bi bi-browser-chrome"></i>
+                  <p>Browser Support</p>
                 </a>
               </li>
-              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
-              <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-circle-fill"></i>
-                  <p>Level 1</p>
-                </a>
-              </li>
+              <li class="nav-header">RESOURCES</li>
               <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-circle-fill"></i>
-                  <p>
-                    Level 1
-                    <i class="nav-arrow bi bi-chevron-right"></i>
-                  </p>
-                </a>
-                <ul class="nav nav-treeview">
-                  <li class="nav-item">
-                    <a href="#" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Level 2</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="#" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>
-                        Level 2
-                        <i class="nav-arrow bi bi-chevron-right"></i>
-                      </p>
-                    </a>
-                    <ul class="nav nav-treeview">
-                      <li class="nav-item">
-                        <a href="#" class="nav-link">
-                          <i class="nav-icon bi bi-record-circle-fill"></i>
-                          <p>Level 3</p>
-                        </a>
-                      </li>
-                      <li class="nav-item">
-                        <a href="#" class="nav-link">
-                          <i class="nav-icon bi bi-record-circle-fill"></i>
-                          <p>Level 3</p>
-                        </a>
-                      </li>
-                      <li class="nav-item">
-                        <a href="#" class="nav-link">
-                          <i class="nav-icon bi bi-record-circle-fill"></i>
-                          <p>Level 3</p>
-                        </a>
-                      </li>
-                    </ul>
-                  </li>
-                  <li class="nav-item">
-                    <a href="#" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Level 2</p>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-circle-fill"></i>
-                  <p>Level 1</p>
+                <a href="../docs/faq.html" class="nav-link">
+                  <i class="nav-icon bi bi-question-circle"></i>
+                  <p>FAQ</p>
                 </a>
               </li>
-              <li class="nav-header">LABELS</li>
               <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-circle text-danger"></i>
-                  <p class="text">Important</p>
+                <a href="../docs/how-to-contribute.html" class="nav-link">
+                  <i class="nav-icon bi bi-people"></i>
+                  <p>Contributing</p>
                 </a>
               </li>
               <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-circle text-warning"></i>
-                  <p>Warning</p>
+                <a href="../docs/license.html" class="nav-link">
+                  <i class="nav-icon bi bi-patch-check"></i>
+                  <p>License</p>
                 </a>
               </li>
               <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-circle text-info"></i>
-                  <p>Informational</p>
+                <a
+                  href="https://github.com/ColorlibHQ/AdminLTE"
+                  target="_blank"
+                  rel="noopener"
+                  class="nav-link"
+                >
+                  <i class="nav-icon bi bi-github"></i>
+                  <p>
+                    GitHub
+                    <i class="bi bi-box-arrow-up-right ms-1" aria-hidden="true"></i>
+                  </p>
                 </a>
               </li>
             </ul>
             <!--end::Sidebar Menu-->
+            <!-- Back to preview CTA (bottom of sidebar) -->
+            <div class="p-3 mt-3 border-top border-secondary border-opacity-25">
+              <a
+                href="../index.html"
+                class="btn btn-sm btn-outline-light w-100 d-flex align-items-center justify-content-center gap-2"
+              >
+                <i class="bi bi-arrow-left" aria-hidden="true"></i>
+                Back to live preview
+              </a>
+            </div>
           </nav>
         </div>
         <!--end::Sidebar Wrapper-->
       </aside>
-      <!--end::Sidebar-->
+      <!--end::Sidebar (docs mode)-->
       <!--begin::App Main-->
       <main class="app-main">
         <!--begin::App Content Header-->
@@ -823,84 +615,235 @@
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <h2 id="quick-start">Quick start</h2>
-            <p>There are multiple ways to install AdminLTE.</p>
-            <h3 id="download--changelog">Download &amp; Changelog:</h3>
-            <p>
-              Always Recommended to download from GitHub latest release
-              <a href="https://github.com/ColorlibHQ/AdminLTE/releases/latest">AdminLTE 4</a> for
-              bug free and latest features.<br />
-              Visit the <a href="https://github.com/ColorlibHQ/AdminLTE/releases">releases</a> page
-              to view the changelog.<br />
-              Legacy Releases are
-              <a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/v3.2.0">AdminLTE 3</a> /
-              <a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/v2.4.18">AdminLTE 2</a> /
-              <a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/1.3.1">AdminLTE 1</a>.
-            </p>
-            <h2 id="stable-release">Stable release</h2>
-            <h3 id="grab-from-jsdelivr-cdn">
-              Grab from <a href="https://www.jsdelivr.com/package/npm/admin-lte">jsdelivr</a> CDN:
-            </h3>
-            <p>
-              <em
-                ><strong>Important Note</strong>: You needed to add separately cdn links for plugins
-                in your project.</em
-              >
-            </p>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="html"
-            ><code><span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">script</span></span>
-<span class="line"><span style="color:#9CDCFE">  src</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-rc7/dist/js/adminlte.min.js&quot;</span></span>
-<span class="line"><span style="color:#9CDCFE">  crossorigin</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;anonymous&quot;</span></span>
-<span class="line"><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">script</span><span style="color:#808080">&gt;</span></span></code></pre>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="html"
-            ><code><span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">link</span></span>
-<span class="line"><span style="color:#9CDCFE">  rel</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;stylesheet&quot;</span></span>
-<span class="line"><span style="color:#9CDCFE">  href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-rc7/dist/css/adminlte.min.css&quot;</span></span>
-<span class="line"><span style="color:#9CDCFE">  crossorigin</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;anonymous&quot;</span></span>
-<span class="line"><span style="color:#808080">/&gt;</span></span></code></pre>
-            <h3 id="using-the-command-line">Using The Command Line:</h3>
-            <p>
-              <em
-                ><strong>Important Note</strong>: To install it via npm/Yarn, you need at least
-                Node.js 18 or higher.</em
-              >
-            </p>
-            <h4 id="via-npm">Via npm</h4>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="bash"
-            ><code><span class="line"><span style="color:#DCDCAA">npm</span><span style="color:#CE9178"> install</span><span style="color:#CE9178"> admin-lte@4.0.0-rc7</span><span style="color:#569CD6"> --save</span></span></code></pre>
-            <h4 id="via-yarn">Via Yarn</h4>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="bash"
-            ><code><span class="line"><span style="color:#DCDCAA">yarn</span><span style="color:#CE9178"> add</span><span style="color:#CE9178"> admin-lte@4.0.0-rc7</span></span></code></pre>
-            <h4 id="via-composer">Via Composer</h4>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="bash"
-            ><code><span class="line"><span style="color:#DCDCAA">composer</span><span style="color:#CE9178"> require</span><span style="color:#CE9178"> &quot;almasaeed2010/adminlte=4.0.0-rc7&quot;</span></span></code></pre>
-            <h4 id="via-git">Via Git</h4>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="bash"
-            ><code><span class="line"><span style="color:#DCDCAA">git</span><span style="color:#CE9178"> clone</span><span style="color:#CE9178"> https://github.com/ColorlibHQ/AdminLTE.git</span></span></code></pre>
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <h2 id="what-is-adminlte">What is AdminLTE?</h2>
+                    <p>
+                      AdminLTE is a free, MIT-licensed admin dashboard template built on
+                      <strong>Bootstrap 5.3.8</strong> with vanilla TypeScript (no jQuery). It ships
+                      responsive layouts, a sidebar navigation system, light/dark/auto color mode,
+                      RTL support, and a growing catalog of demo pages — calendar, kanban, chat,
+                      file manager, invoice, profile, settings, and more.
+                    </p>
+                    <p>
+                      It’s a <em>template</em>, not a component library. You drop the markup into
+                      your own project (or framework templates) and customize the parts you need.
+                      Bootstrap 5 handles the components; AdminLTE provides the application shell.
+                    </p>
+                    <p>
+                      If you’ve never used AdminLTE before, start with
+                      <a href="getting-started.html">Getting Started</a> — it walks through a
+                      working dashboard in ten minutes.
+                    </p>
+                    <h2 id="installation-paths">Installation paths</h2>
+                    <p>Pick the path that matches how you’ll actually use AdminLTE:</p>
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Path</th>
+                          <th>Best for</th>
+                          <th>Setup time</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td><strong>CDN</strong></td>
+                          <td>Prototyping, demos, simple sites</td>
+                          <td>1 minute</td>
+                        </tr>
+                        <tr>
+                          <td><strong>npm + bundler</strong></td>
+                          <td>Production apps, framework projects (Laravel, Symfony, Rails)</td>
+                          <td>5 minutes</td>
+                        </tr>
+                        <tr>
+                          <td><strong>Build from source</strong></td>
+                          <td>You need to customize SCSS variables, sidebar width, breakpoints</td>
+                          <td>10 minutes</td>
+                        </tr>
+                        <tr>
+                          <td><strong>Composer</strong></td>
+                          <td>PHP projects that prefer Packagist over npm</td>
+                          <td>2 minutes</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <h3 id="cdn--fastest-path">CDN — fastest path</h3>
+                    <p>
+                      Drop these four CSS tags into <code>&lt;head&gt;</code> and four script tags
+                      before <code>&lt;/body&gt;</code>. No install, no build step:
+                    </p>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="html"
+                    ><code><span class="line"><span style="color:#6A9955">&lt;!-- In &lt;head&gt; --&gt;</span></span>
+<span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">link</span><span style="color:#9CDCFE"> rel</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;stylesheet&quot;</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css&quot;</span><span style="color:#808080"> /&gt;</span></span>
+<span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">link</span><span style="color:#9CDCFE"> rel</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;stylesheet&quot;</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/styles/overlayscrollbars.min.css&quot;</span><span style="color:#808080"> /&gt;</span></span>
+<span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">link</span><span style="color:#9CDCFE"> rel</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;stylesheet&quot;</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;https://cdn.jsdelivr.net/npm/admin-lte@4.0.0/dist/css/adminlte.min.css&quot;</span><span style="color:#808080"> /&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#6A9955">&lt;!-- Before &lt;/body&gt; --&gt;</span></span>
+<span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">script</span><span style="color:#9CDCFE"> src</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js&quot;</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">script</span><span style="color:#808080">&gt;</span></span>
+<span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">script</span><span style="color:#9CDCFE"> src</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js&quot;</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">script</span><span style="color:#808080">&gt;</span></span>
+<span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">script</span><span style="color:#9CDCFE"> src</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js&quot;</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">script</span><span style="color:#808080">&gt;</span></span>
+<span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">script</span><span style="color:#9CDCFE"> src</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;https://cdn.jsdelivr.net/npm/admin-lte@4.0.0/dist/js/adminlte.min.js&quot;</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">script</span><span style="color:#808080">&gt;</span></span></code></pre>
+                    <p>
+                      Then copy any
+                      <a href="https://github.com/ColorlibHQ/AdminLTE/tree/master/dist"
+                        >demo page</a
+                      >
+                      HTML into your own file. See
+                      <a href="getting-started.html">Getting Started</a> for the minimum-viable
+                      layout.
+                    </p>
+                    <h3 id="npm--bundler">npm + bundler</h3>
+                    <p>
+                      Requires Node.js 18+ and a bundler (Vite, Webpack, Rollup, esbuild, etc.).
+                    </p>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="bash"
+                    ><code><span class="line"><span style="color:#DCDCAA">npm</span><span style="color:#CE9178"> install</span><span style="color:#CE9178"> admin-lte@4.0.0</span></span></code></pre>
+                    <p>Then import the CSS and JS in your app entry point:</p>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="js"
+                    ><code><span class="line"><span style="color:#6A9955">// CSS</span></span>
+<span class="line"><span style="color:#C586C0">import</span><span style="color:#CE9178"> &quot;admin-lte/dist/css/adminlte.min.css&quot;</span></span>
+<span class="line"><span style="color:#6A9955">// Plus Bootstrap and dependency CSS</span></span>
+<span class="line"><span style="color:#C586C0">import</span><span style="color:#CE9178"> &quot;bootstrap-icons/font/bootstrap-icons.css&quot;</span></span>
+<span class="line"><span style="color:#C586C0">import</span><span style="color:#CE9178"> &quot;overlayscrollbars/styles/overlayscrollbars.css&quot;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#6A9955">// JS</span></span>
+<span class="line"><span style="color:#C586C0">import</span><span style="color:#CE9178"> &quot;bootstrap&quot;</span></span>
+<span class="line"><span style="color:#C586C0">import</span><span style="color:#CE9178"> &quot;admin-lte&quot;</span></span></code></pre>
+                    <p>
+                      Yarn and pnpm work the same way — substitute <code>yarn add</code> or
+                      <code>pnpm add</code> for the install.
+                    </p>
+                    <h3 id="build-from-source">Build from source</h3>
+                    <p>
+                      If you want to customize SCSS variables (sidebar width, breakpoints, brand
+                      colours), clone the repo and build locally:
+                    </p>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="bash"
+                    ><code><span class="line"><span style="color:#DCDCAA">git</span><span style="color:#CE9178"> clone</span><span style="color:#CE9178"> https://github.com/ColorlibHQ/AdminLTE.git</span></span>
+<span class="line"><span style="color:#DCDCAA">cd</span><span style="color:#CE9178"> AdminLTE</span></span>
+<span class="line"><span style="color:#DCDCAA">npm</span><span style="color:#CE9178"> install</span></span>
+<span class="line"><span style="color:#DCDCAA">npm</span><span style="color:#CE9178"> run</span><span style="color:#CE9178"> dev</span><span style="color:#6A9955">          # dev server with hot-reload at localhost:3000</span></span>
+<span class="line"><span style="color:#DCDCAA">npm</span><span style="color:#CE9178"> run</span><span style="color:#CE9178"> production</span><span style="color:#6A9955">   # one-off production build (clean + lint + compile)</span></span></code></pre>
+                    <p>
+                      The compiled output lands in <code>dist/</code>. Edit
+                      <code>src/scss/_variables.scss</code> or
+                      <code>src/scss/_bootstrap-variables.scss</code>, then rerun the build. See
+                      <a href="customization.html">Customization &amp; Theming</a> for which
+                      variables matter.
+                    </p>
+                    <h3 id="composer">Composer</h3>
+                    <p>For PHP projects:</p>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="bash"
+                    ><code><span class="line"><span style="color:#DCDCAA">composer</span><span style="color:#CE9178"> require</span><span style="color:#CE9178"> &quot;almasaeed2010/adminlte=4.0.0&quot;</span></span></code></pre>
+                    <p>
+                      The package is published from the same source tree — you get the
+                      <code>dist/</code> folder ready to serve.
+                    </p>
+                    <h2 id="prerequisites">Prerequisites</h2>
+                    <table>
+                      <thead>
+                        <tr>
+                          <th></th>
+                          <th>Minimum</th>
+                          <th>Recommended</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td>Bootstrap</td>
+                          <td>5.3.0</td>
+                          <td>5.3.8 (pinned in <code>package.json</code>)</td>
+                        </tr>
+                        <tr>
+                          <td>Node.js</td>
+                          <td>18 LTS</td>
+                          <td>22 LTS (used by CI)</td>
+                        </tr>
+                        <tr>
+                          <td>Browser</td>
+                          <td>Modern evergreen</td>
+                          <td>Latest stable Chrome/Firefox/Safari/Edge</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <p>
+                      AdminLTE 4 does <strong>not</strong> support Internet Explorer. If you need
+                      IE11, stay on
+                      <a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/v3.2.0"
+                        >AdminLTE 3</a
+                      >
+                      or earlier.
+                    </p>
+                    <h2 id="where-to-next">Where to next</h2>
+                    <ul>
+                      <li>
+                        <strong><a href="getting-started.html">Getting Started</a></strong> — a
+                        working dashboard in 10 minutes
+                      </li>
+                      <li>
+                        <strong><a href="layout.html">Layout</a></strong> — the app-wrapper
+                        structure and responsive options
+                      </li>
+                      <li>
+                        <strong><a href="customization.html">Customization</a></strong> — change
+                        colours, sidebar width, spacing
+                      </li>
+                      <li>
+                        <strong><a href="migration.html">Migration from v3</a></strong> — upgrading
+                        an existing AdminLTE 3 project
+                      </li>
+                    </ul>
+                    <h2 id="releases-and-changelog">Releases and changelog</h2>
+                    <p>
+                      Always grab the latest from the
+                      <a href="https://github.com/ColorlibHQ/AdminLTE/releases"
+                        >GitHub releases page</a
+                      >
+                      — that’s where the changelog lives.
+                    </p>
+                    <p>
+                      Legacy releases:
+                      <a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/v3.2.0"
+                        >AdminLTE 3.2</a
+                      >
+                      ·
+                      <a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/v2.4.18"
+                        >AdminLTE 2</a
+                      >
+                      ·
+                      <a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/1.3.1"
+                        >AdminLTE 1</a
+                      >
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>
@@ -970,7 +913,71 @@
         }
       });
     </script>
-    <!--end::OverlayScrollbars Configure-->
+    <!--end::OverlayScrollbars Configure--><!--begin::Color Mode Toggle (#6010)-->
+    <script>
+      (() => {
+        'use strict';
+        const STORAGE_KEY = 'lte-theme';
+        const getStoredTheme = () => localStorage.getItem(STORAGE_KEY);
+        const setStoredTheme = (theme) => localStorage.setItem(STORAGE_KEY, theme);
+        const prefersDark = () => globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
+        const getPreferredTheme = () => {
+          const stored = getStoredTheme();
+          if (stored) return stored;
+          return prefersDark() ? 'dark' : 'light';
+        };
+        const setTheme = (theme) => {
+          const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme;
+          document.documentElement.setAttribute('data-bs-theme', resolved);
+        };
+        setTheme(getPreferredTheme());
+        const showActiveTheme = (theme) => {
+          // Highlight the active dropdown option
+          document.querySelectorAll('[data-bs-theme-value]').forEach((el) => {
+            el.classList.remove('active');
+            el.setAttribute('aria-pressed', 'false');
+            const check = el.querySelector('.bi-check-lg');
+            if (check) check.classList.add('d-none');
+          });
+          const active = document.querySelector(`[data-bs-theme-value="${theme}"]`);
+          if (active) {
+            active.classList.add('active');
+            active.setAttribute('aria-pressed', 'true');
+            const check = active.querySelector('.bi-check-lg');
+            if (check) check.classList.remove('d-none');
+          }
+          // Sync the topbar trigger icon
+          document.querySelectorAll('[data-lte-theme-icon]').forEach((icon) => {
+            icon.classList.toggle('d-none', icon.dataset.lteThemeIcon !== theme);
+          });
+        };
+        globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+          const stored = getStoredTheme();
+          if (!stored || stored === 'auto') setTheme(getPreferredTheme());
+        });
+        document.addEventListener('DOMContentLoaded', () => {
+          showActiveTheme(getPreferredTheme());
+          document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
+            toggle.addEventListener('click', () => {
+              const theme = toggle.getAttribute('data-bs-theme-value');
+              setStoredTheme(theme);
+              setTheme(theme);
+              showActiveTheme(theme);
+            });
+          });
+        });
+      })();
+    </script>
+    <!--end::Color Mode Toggle-->
     <!--end::Script-->
   </body>
   <!--end::Body-->