Color Mode Toggler

src/partials/_scripts.html

@@ -6,12 +6,71 @@
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha256-9SEPo+fwJFpMUet/KACSwO+Z/dKMReF9q4zFhU/fT9M=" crossorigin="anonymous"></script>
 
 <!-- REQUIRED SCRIPTS -->
-
 <!-- AdminLTE App -->
 <script src="@@path/js/adminlte.js"></script>
 
-<!-- OPTIONAL SCRIPTS -->
+<!-- DON'T USE THIS IN PRODUCTION -->
+<script>
+  // 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>
+
+<!-- OPTIONAL SCRIPTS -->
 <script>
   const SELECTOR_SIDEBAR = '.sidebar'
   const Default = {

src/partials/dashboard/_topbar.html

@@ -4,7 +4,7 @@
     <!-- Start navbar links -->
     <ul class="navbar-nav">
       <li class="nav-item">
-        <a class="nav-link" data-lte-toggle="sidebar-full" href="#" role="button"><i class="fas fa-bars"></i></a>
+        <a class="nav-link" data-lte-toggle="sidebar-full" 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>
@@ -19,14 +19,14 @@
       <!-- Navbar Search -->
       <li class="nav-item">
         <a class="nav-link" data-widget="navbar-search" href="#" role="button">
-          <i class="fas fa-search"></i>
+          <i class="fa-solid fa-search"></i>
         </a>
       </li>
 
       <!-- Messages Dropdown Menu -->
       <li class="nav-item dropdown">
         <a class="nav-link" data-bs-toggle="dropdown" href="#">
-          <i class="far fa-comments"></i>
+          <i class="fa-regular fa-comments"></i>
           <span class="navbar-badge badge bg-danger">3</span>
         </a>
         <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
@@ -39,10 +39,10 @@
               <div class="flex-grow-1">
                 <h3 class="dropdown-item-title">
                   Brad Diesel
-                  <span class="float-end fs-7 text-danger"><i class="fas fa-star"></i></span>
+                  <span class="float-end fs-7 text-danger"><i class="fa-solid fa-star"></i></span>
                 </h3>
                 <p class="fs-7">Call me whenever you can...</p>
-                <p class="fs-7 text-muted"><i class="far fa-clock me-1"></i> 4 Hours Ago</p>
+                <p class="fs-7 text-muted"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
               </div>
             </div>
             <!-- Message End -->
@@ -57,10 +57,10 @@
               <div class="flex-grow-1">
                 <h3 class="dropdown-item-title">
                   John Pierce
-                  <span class="float-end fs-7 text-muted"><i class="fas fa-star"></i></span>
+                  <span class="float-end fs-7 text-muted"><i class="fa-solid fa-star"></i></span>
                 </h3>
                 <p class="fs-7">I got your message bro</p>
-                <p class="fs-7 text-muted"><i class="far fa-clock me-1"></i> 4 Hours Ago</p>
+                <p class="fs-7 text-muted"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
               </div>
             </div>
             <!-- Message End -->
@@ -75,10 +75,10 @@
               <div class="flex-grow-1">
                 <h3 class="dropdown-item-title">
                   Nora Silvester
-                  <span class="float-end fs-7 text-warning"><i class="fas fa-star"></i></span>
+                  <span class="float-end fs-7 text-warning"><i class="fa-solid fa-star"></i></span>
                 </h3>
                 <p class="fs-7">The subject goes here</p>
-                <p class="fs-7 text-muted"><i class="far fa-clock me-1"></i> 4 Hours Ago</p>
+                <p class="fs-7 text-muted"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
               </div>
             </div>
             <!-- Message End -->
@@ -90,24 +90,24 @@
       <!-- Notifications Dropdown Menu -->
       <li class="nav-item dropdown">
         <a class="nav-link" data-bs-toggle="dropdown" href="#">
-          <i class="far fa-bell"></i>
+          <i class="fa-regular fa-bell"></i>
           <span class="navbar-badge badge bg-warning">15</span>
         </a>
         <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
           <span class="dropdown-item dropdown-header">15 Notifications</span>
           <div class="dropdown-divider"></div>
           <a href="#" class="dropdown-item">
-            <i class="fas fa-envelope me-2"></i> 4 new messages
+            <i class="fa-solid fa-envelope me-2"></i> 4 new messages
             <span class="float-end text-muted fs-7">3 mins</span>
           </a>
           <div class="dropdown-divider"></div>
           <a href="#" class="dropdown-item">
-            <i class="fas fa-users me-2"></i> 8 friend requests
+            <i class="fa-solid fa-users me-2"></i> 8 friend requests
             <span class="float-end text-muted fs-7">12 hours</span>
           </a>
           <div class="dropdown-divider"></div>
           <a href="#" class="dropdown-item">
-            <i class="fas fa-file me-2"></i> 3 new reports
+            <i class="fa-solid fa-file me-2"></i> 3 new reports
             <span class="float-end text-muted fs-7">2 days</span>
           </a>
           <div class="dropdown-divider"></div>
@@ -151,15 +151,46 @@
           </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">
+          <div class="theme-icon-active">
+            <i class="my-1"></i>
+          </div>
+          <span class="d-lg-none ms-2">Toggle theme</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 opacity-50"></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 opacity-50"></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 opacity-50"></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">
-          <i class="fas fa-expand-arrows-alt"></i>
+          <i class="fa-solid fa-expand-arrows-alt"></i>
         </a>
       </li>
       <li class="nav-item">
         <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
-          <i class="fas fa-th-large"></i>
+          <i class="fa-solid fa-th-large"></i>
         </a>
       </li> -->
     </ul>