feat: add dark mode (#58)

* feat(templates): add a button to switch between dark and light modes

* feat(templates): add js script to handle the switch of the modes when the switch is checked or not

* refactor(templates): refactor the js template to use htmx javascript api

templates/partials/js.tmpl

@@ -1,10 +1,33 @@
 {{define "js"}}
+  <script src="/static/bootstrap.min.js"></script>
   <script>
     htmx.on('#form', 'htmx:xhr:progress', function(evt) {
       htmx.find('#progress').setAttribute('value', evt.detail.loaded/evt.detail.total * 100)
     });
   </script>
-  <script src="/static/bootstrap.min.js"></script>
+  <script>
+    // dark mode toggle buutton.
+    htmx.on('htmx:load', function(evt) { defaultMode(); });
+    htmx.on('#darkModeSwitch', 'change', function(evt) { darkModeSwitch(); });
+
+    function defaultMode() {
+      const htmlElement = document.documentElement;
+      const currentTheme = localStorage.getItem('bsTheme') || 'dark';
+      htmlElement.setAttribute('data-bs-theme', currentTheme);
+    }
+
+    function darkModeSwitch() {
+      let htmlElement = document.documentElement;
+      let switchElement = document.getElementById('darkModeSwitch');
+      if (switchElement.checked) {
+        htmlElement.setAttribute('data-bs-theme', 'dark');
+        localStorage.setItem('bsTheme', 'dark');
+      } else {
+        htmlElement.setAttribute('data-bs-theme', 'light');
+        localStorage.setItem('bsTheme', 'light');
+      }
+    }
+  </script>
   <script>
     htmx.on('htmx:load', function(evt) { updateName(); });
     htmx.on(window, 'resize', function(evt) { updateName(); });

templates/partials/nav.tmpl

@@ -1,5 +1,5 @@
 {{define "nav"}}
-  <nav class="navbar bg-dark border-bottom border-body navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
+  <nav class="navbar border-bottom border-body navbar-expand-lg bg-body-tertiary">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Morphos Server</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -11,6 +11,10 @@
             <a class="nav-link active" aria-current="page" href="/">Home</a>
           </li>
         </ul>
+        <div class="form-check form-switch ms-auto">
+          <input class="form-check-input" type="checkbox" id="darkModeSwitch" hx-trigger="change" checked>
+          <label class="form-check-label" for="darkModeSwitch">Dark Mode</label>
+        </div>
       </div>
     </div>
   </nav>