add darkmode switch

css/main.css.map

@@ -1 +1 @@
-{"version":3,"sources":["main.sass"],"names":[],"mappings":"AAAA,KACE,eAAA,CACA,QAAA,CACA,eAAA,CACA,WAAA,CACA,gBAAA,CACA,kCAAA,CAEA,mDACE,eAAA,CAEJ,IACE,WAAA,CACA,cAAA,CAEF,EACE,SAAA,CACA,QAAA,CACA,oBAAA,CAEA,gBACE,oBAAA,CACA,aAAA,CAEJ,UACE,iBAAA,CAEF,QACE,WAAA,CACA,gBAAA,CACA,cAAA,CACA,iBAAA,CAEA,gBACE,iBAAA,CACA,oBAAA,CACA,UAAA,CACA,WAAA,CAEA,sBACE,SAAA,CACA,OAAA,CACA,QAAA,CAEF,wBACE,iBAAA,CACA,cAAA,CACA,KAAA,CACA,MAAA,CACA,OAAA,CACA,QAAA,CACA,qBAAA,CAEA,cAAA,CAEA,+BACE,iBAAA,CACA,UAAA,CACA,WAAA,CACA,UAAA,CACA,QAAA,CACA,UAAA,CACA,qBAAA,CAEA,cAAA,CAEF,8BACE,kBAAA,CAEA,qCACE,iBAAA,CAGN,8BACE,wBAAA,CAEF,4BACE,0BAAA,CAEF,qCACE,0BAAA,CAEN,cACI,qBAAA,CACA,+BAAA,CAEJ,eACE,gBAAA,CACA,8BAAA,CACA,kBAAA,CACA,iBAAA,CACA,gBAAA,CACA,iBAAA,CAIE,iCACE,mBAAA,CAEF,qFAEE,eAAA,CAKF,uEACE,kBAAA,CACA,YAAA,CACA,iBAAA,CACA,eAAA,CAEF,mEACE,iBAAA,CACA,kBAAA,CACA,cAAA,CAEA,yEACE,eAAA,CACA,iBAAA,CAEF,+EACE,iBAAA,CACA,SAAA,CACA,aAAA,CACA,kBAAA,CACA,OAAA,CACA,UAAA,CACA,gBAAA,CAEA,+FACE,QAAA,CACA,SAAA,CACA,UAAA,CACA,iBAAA,CACA,UAAA,CACA,WAAA,CACA,iBAAA,CACA,kBAAA,CAEJ,6FACE,iBAAA,CACA,yBAAA,CACA,UAAA,CAEF,+EACE,yBAAA,CAEA,+FACE,iBAAA,CACA,OAAA,CACA,UAAA,CACA,UAAA,CACA,cAAA,CACA,iBAAA,CACA,4BAAA,CACA,+BAAA,CACA,6BAAA,CAEF,mHACE,iBAAA,CACA,UAAA,CACA,UAAA,CACA,WAAA,CACA,iBAAA,CACA,iBAAA,CAEA,uHACE,cAAA,CACA,gBAAA,CAEV,sBACE,gBAAA,CAYA,iCACE,WAAA,CACA,gBAAA,CAEF,uDACI,SAAA,CAIF,uEACE,UAAA,CAEF,8IAEE,YAAA,CAIF,4CACE,sBAAA,CACA,WAAA,CACA,6BAAA,CAEF,+CACE,UAAA,CACA,sBAAA,CACA,WAAA,CACA,eAAA,CACA,gBAAA,CAEF,8CACE,eAAA,CACA,eAAA,CACA,UAAA,CACA,gBAAA,CAEA,wGACE,UAAA,CAEN,+BACE,gBAAA,CAEF,uDACE,4BAAA,CAIF,8BACE,gBAAA,CAYF,0CACE,WAAA,CAKN,kBACE,+BAAA,CACA,eAAA,CACA,gBAAA,CACA,mBAAA,CACA,eAAA,CAEA,iCACE,eAAA,CAEA,mCACE,UAAA,CACA,UAAA,CACA,eAAA,CACA,aAAA,CAEA,yCACE,wBAAA,CAEN,2CACE,aAAA,CAEA,+CACE,eAAA,CACA,cAAA,CACA,gBAAA,CACA,qBAAA","file":"main.css"}
+{"version":3,"sources":["main.sass"],"names":[],"mappings":"AAAA,KAMA,qBANW,CAAA,UACE,CAAA,QAQX,CAAA,eACA,CAAA,WACA,CAAA,gBACA,CAAA,kCACA,CAAA,mDAEA,eACE,CAAA,IAEJ,WACE,CAAA,cACA,CAAA,EAEF,SACE,CAAA,QACA,CAAA,oBACA,CAAA,gBAEA,oBACE,CAAA,aACA,CAAA,UAEJ,iBACE,CAAA,QAEF,WACE,CAAA,gBACA,CAAA,cACA,CAAA,iBACA,CAAA,gBAEA,iBACE,CAAA,oBACA,CAAA,UACA,CAAA,WACA,CAAA,sBAEA,SACE,CAAA,OACA,CAAA,QACA,CAAA,wBAEF,iBACE,CAAA,cACA,CAAA,KACA,CAAA,MACA,CAAA,OACA,CAAA,QACA,CAAA,qBACA,CACA,cACA,CAAA,+BAEA,iBACE,CAAA,UACA,CAAA,WACA,CAAA,UACA,CAAA,QACA,CAAA,UACA,CAAA,qBACA,CACA,cACA,CAAA,8BAEF,kBACE,CAAA,qCAEA,iBACE,CAAA,8BAGN,wBACE,CAAA,4BAEF,0BACE,CAAA,qCAEF,0BACE,CAAA,OAEN,qBACI,CAAA,+BACA,CAAA,eAEJ,gBACE,CAAA,8BACA,CAAA,kBACA,CAAA,iBACA,CAAA,gBACA,CAAA,iBACA,CAAA,iCAIE,mBACE,CAAA,qFAEF,eAEE,CAAA,uEAKF,kBACE,CAAA,YACA,CAAA,iBACA,CAAA,eACA,CAAA,mEAEF,iBACE,CAAA,kBACA,CAAA,cACA,CAAA,yEAEA,eACE,CAAA,iBACA,CAAA,+EAEF,iBACE,CAAA,SACA,CAAA,aACA,CAAA,kBACA,CAAA,OACA,CAAA,UACA,CAAA,gBACA,CAAA,+FAEA,QACE,CAAA,SACA,CAAA,UACA,CAAA,iBACA,CAAA,UACA,CAAA,WACA,CAAA,iBACA,CAAA,kBACA,CAAA,6FAEJ,iBACE,CAAA,yBACA,CAAA,UACA,CAAA,+EAEF,yBACE,CAAA,+FAEA,iBACE,CAAA,OACA,CAAA,UACA,CAAA,UACA,CAAA,cACA,CAAA,iBACA,CAAA,4BACA,CAAA,+BACA,CAAA,6BACA,CAAA,mHAEF,iBACE,CAAA,UACA,CAAA,UACA,CAAA,WACA,CAAA,iBACA,CAAA,iBACA,CAAA,uHAEA,cACE,CAAA,gBACA,CAAA,sBAEV,gBACE,CAAA,iCAYA,WACE,CAAA,gBACA,CAAA,uDAEF,SACI,CAAA,uEAIF,UACE,CAAA,8IAEF,YAEE,CAAA,4CAIF,sBACE,CAAA,WACA,CAAA,6BACA,CAAA,+CAEF,UACE,CAAA,sBACA,CAAA,WACA,CAAA,eACA,CAAA,gBACA,CAAA,8CAEF,eACE,CAAA,eACA,CAAA,UACA,CAAA,gBACA,CAAA,wGAEA,UACE,CAAA,+BAEN,gBACE,CAAA,uDAEF,4BACE,CAAA,8BAIF,gBACE,CAAA,0CAYF,WACE,CAAA,kBAKN,+BACE,CAAA,eACA,CAAA,gBACA,CAAA,mBACA,CAAA,eACA,CAAA,iCAEA,eACE,CAAA,mCAEA,UACE,CAAA,UACA,CAAA,eACA,CAAA,aACA,CAAA,yCAEA,wBACE,CAAA,2CAEN,aACE,CAAA,+CAEA,eACE,CAAA,cACA,CAAA,gBACA,CAAA,qBACA,CAAA,sBAEN,qBA3RU,CAAA,2BA8RR,UA7RU,CAAA,uCAgSV,WACE,CAAA,uCAEF,mCAlSY,CAAA,qDAqSV,qBAvSM,CAAA,UACE,CAAA,4BA0SV,qBA3SQ,CAAA,UACE,CAAA,mCACE,CAAA,6BA8SZ,UA/SU","file":"main.css"}

css/main.sass

@@ -1,5 +1,12 @@
+$bg_light: #fff
+$text_light: #111
+$bg_dark: #111
+$text_dark: #fff
+$border_dark: rgba(255,255,255,.125)
+  
 body
-  background: #ffffff
+  background-color: $bg_light
+  color: $text_light
   margin: 0
   margin-top: 80px
   height: 100%
@@ -80,7 +87,7 @@ a
     &:checked + .slider:before
       transform: translateX(26px)
 
-header.navbar
+header
     background-color: gray
     border-radius: 0px 0px 30px 30px
 
@@ -274,4 +281,28 @@ footer#footerwrap
       max-height: 20px
       max-width: 25px
       margin-right: 5px
-      vertical-align: middle
+      vertical-align: middle
+
+body[data-theme="dark"]
+  background-color: $bg_dark
+
+  main
+    color: $text_dark
+  
+  .fa-moon::before
+    content: "\f185"
+  
+  .list-group-item
+    border-color: $border_dark
+    
+    &.sub-component
+      background-color: $bg_dark
+      color: $text_dark
+
+  .card
+    background-color: $bg_dark
+    color: $text_dark
+    border-color: $border_dark
+
+  .table
+    color: $text_dark

js/main.js

@@ -27,3 +27,29 @@ function timeago() {
     });
   });
 })();
+
+var darkSwitch = document.getElementById("darkSwitch");
+window.addEventListener("load", function () {
+  if (darkSwitch) {
+    initTheme();
+    darkSwitch.addEventListener("change", function () {
+      resetTheme();
+    });
+  }
+});
+
+function initTheme() {
+  var darkThemeSelected = localStorage.getItem("darkSwitch") !== null && localStorage.getItem("darkSwitch") === "dark";
+  darkSwitch.checked = darkThemeSelected;
+  darkThemeSelected ? document.body.setAttribute("data-theme", "dark") : document.body.removeAttribute("data-theme");
+}
+
+function resetTheme() {
+  if (darkSwitch.checked) {
+    document.body.setAttribute("data-theme", "dark");
+    localStorage.setItem("darkSwitch", "dark");
+  } else {
+    document.body.removeAttribute("data-theme");
+    localStorage.removeItem("darkSwitch");
+  }
+}

template.php

@@ -101,8 +101,8 @@ class Template
     </head>
 
     <body>
-      <header class="navbar fixed-top navbar-expand-lg navbar-dark">
+      <header class="fixed-top">
-        <nav class="container">
+        <nav class="container navbar navbar-expand-lg navbar-dark">
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
           </button>
@@ -116,6 +116,10 @@ class Template
               <?php
               if (!$admin) {
               ?>
+                <li class="nav-item">
+                  <input type="checkbox" class="custom-control-input" id="darkSwitch" hidden>
+                  <label class="nav-link" for="darkSwitch"><i class="fas fa-moon"></i></label>
+                </li>
                 <li class="nav-item">
                   <?php echo $strSubsMenu; ?>
                 </li>
@@ -138,6 +142,10 @@ class Template
                 <li class="nav-item">
                   <a class="nav-link link-light" href="<?php echo WEB_URL; ?>/admin/?do=logout"><?php echo _("Logout"); ?></a>
                 </li>
+                <li class="nav-item">
+                  <input type="checkbox" class="custom-control-input" id="darkSwitch" hidden>
+                  <label class="nav-link" for="darkSwitch"><i class="fas fa-moon"></i></label>
+                </li>
               <?php
               }
               ?>