Auto darkmode fix

.gitignore

@@ -1,5 +1,19 @@
-/public
 /config.yaml
 /content
 /static/images
 .vscode
+
+### Hugo ###
+# Generated files by hugo
+/public/
+/resources/_gen/
+/assets/jsconfig.json
+hugo_stats.json
+
+# Executable may be added to repository
+hugo.exe
+hugo.darwin
+hugo.linux
+
+# Temporary lock file while building
+/.hugo_build.lock

layouts/_default/baseof.html

@@ -56,6 +56,20 @@
       $('[data-toggle="tooltip"]').tooltip()
     })
   </script>
+
+  <!-- Darkmode -->
+  <script>
+    function autoDarkMode() {
+      $("body").toggleClass("darkmode");
+      $(".fa-moon").addClass("d-none");
+      $(".fa-sun").removeClass("d-none");
+      $("nav").toggleClass("navbar-dark");
+      $("nav").toggleClass("navbar-light");
+      $('.text-dark').toggleClass('darkmode-text-dark');
+      $('.text-muted').toggleClass('darkmode-text-muted');
+    };
+  </script>
+  <script src="/js/auto_darkmode.js"></script>
   <script>
     $('.darkmode-label').click(function () {
       $("body").toggleClass("darkmode");
@@ -63,26 +77,13 @@
       $(".fa-sun").toggleClass("d-none");
       $("nav").toggleClass("navbar-dark");
       $("nav").toggleClass("navbar-light");
-      $('.text-dark').addClass('darkmode-text-dark').removeClass('text-dark');
+      $('.text-dark').toggleClass('darkmode-text-dark');
-      $('.text-muted').addClass('darkmode-text-muted').removeClass('text-muted');
+      $('.text-muted').toggleClass('darkmode-text-muted');
-      if ($('input.custom-control-input').is(':checked')) {
+
-        $('.darkmode-text-dark').addClass('text-dark').removeClass('darkmode-text-dark');
-        $('.darkmode-text-muted').addClass('text-muted').removeClass('darkmode-text-muted');
-      };
       switchDarkmodeSetting();
     });
-    if ($('input.custom-control-input').is(':checked')) {
-      $("body").toggleClass("darkmode");
-      $(".fa-moon").addClass("d-none");
-      $(".fa-sun").removeClass("d-none");
-      $("nav").toggleClass("navbar-dark");
-      $("nav").toggleClass("navbar-light");
-      $('.text-dark').addClass('darkmode-text-dark').removeClass('text-dark');
-      $('.text-muted').addClass('darkmode-text-muted').removeClass('text-muted');
-      switchDarkmodeSetting();
-    };
   </script>
-  {{- partial "sections/v3/auto_darkmode.html" . -}}
+
 </body>
 {{ else }}
 

layouts/index.html

@@ -115,6 +115,23 @@
     {{- partial "sections/v3/footer.html" . -}}
     {{- partial "sections/v3/scripts.html" . -}}
   </div>
+
+  <!-- Darkmode -->
+  <script>
+    function autoDarkMode() {
+      $("body").toggleClass("darkmode");
+      $(".fa-moon").addClass("d-none");
+      $(".fa-sun").removeClass("d-none");
+      $("nav").toggleClass("navbar-dark");
+      $("nav").toggleClass("navbar-light");
+      $(".text-dark").toggleClass("darkmode-text-dark");
+      $(".text-muted").toggleClass("darkmode-text-muted")
+      $(".about-backdark").toggleClass("about-back");
+      $(".education-backdark").toggleClass("education-back");
+      $(".achievements-backdark").toggleClass("achievements-back");
+    }
+  </script>
+  <script src="/js/auto_darkmode.js"></script>
   <script>
     /*
     document.onreadystatechange = function () {
@@ -131,6 +148,7 @@
       }
     };
     */
+
     $(".darkmode-label").click(function () {
       $("body").toggleClass("darkmode");
       $(".fa-moon").toggleClass("d-none");
@@ -140,37 +158,14 @@
       $(".achievements-backdark").toggleClass("achievements-back");
       $("nav").toggleClass("navbar-dark");
       $("nav").toggleClass("navbar-light");
-      $(".text-dark").addClass("darkmode-text-dark").removeClass("text-dark");
+      $(".text-dark").toggleClass("darkmode-text-dark");
-      $(".text-muted")
+      $(".text-muted").toggleClass("darkmode-text-muted")
-        .addClass("darkmode-text-muted")
+
-        .removeClass("text-muted");
-      if ($("input.custom-control-input").is(":checked")) {
-        $(".darkmode-text-dark")
-          .addClass("text-dark")
-          .removeClass("darkmode-text-dark");
-        $(".darkmode-text-muted")
-          .addClass("text-muted")
-          .removeClass("darkmode-text-muted");
-      }
       switchDarkmodeSetting();
     });
-    if ($("input.custom-control-input").is(":checked")) {
+
-      $("body").toggleClass("darkmode");
+
-      $(".fa-moon").addClass("d-none");
-      $(".fa-sun").removeClass("d-none");
-      $("nav").toggleClass("navbar-dark");
-      $("nav").toggleClass("navbar-light");
-      $(".text-dark").addClass("darkmode-text-dark").removeClass("text-dark");
-      $(".text-muted")
-        .addClass("darkmode-text-muted")
-        .removeClass("text-muted");
-      $(".about-backdark").toggleClass("about-back");
-      $(".education-backdark").toggleClass("education-back");
-      $(".achievements-backdark").toggleClass("achievements-back");
-      switchDarkmodeSetting();
-    }
   </script>
-  {{- partial "sections/v3/auto_darkmode.html" . -}}
 </body>
 {{ else }}
 

layouts/partials/sections/v3/auto_darkmode.html

@@ -1 +0,0 @@
-<script src="/js/auto_darkmode.js"></script>

static/js/auto_darkmode.js

@@ -1,21 +1,21 @@
-function setCookie(cname, cvalue) {
+function setCookie(name,value,days) {
-    document.cookie = cname + "=" + cvalue + ";path=/;";
+    var expires = "";
-}
+    if (days) {
-
+        var date = new Date();
-function getCookie(cname) {
+        date.setTime(date.getTime() + (days*24*60*60*1000));
-    let name = cname + "=";
+        expires = "; expires=" + date.toUTCString();
-    let decodedCookie = decodeURIComponent(document.cookie);
-    let ca = decodedCookie.split(';');
-    for(let i = 0; i <ca.length; i++) {
-      let c = ca[i];
-      while (c.charAt(0) == ' ') {
-        c = c.substring(1);
-      }
-      if (c.indexOf(name) == 0) {
-        return c.substring(name.length, c.length);
-      }
     }
-    return "";
+    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
+}
+function getCookie(name) {
+    var nameEQ = name + "=";
+    var ca = document.cookie.split(';');
+    for(var i=0;i < ca.length;i++) {
+        var c = ca[i];
+        while (c.charAt(0)==' ') c = c.substring(1,c.length);
+        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+    }
+    return null;
 }
 
 function getDarkmodeSetting() {
@@ -31,14 +31,14 @@ function getDarkmodeSetting() {
 
 function setDarkmodeSetting(value) {
     if (value) {
-        setCookie("darkmode", "true");
+        setCookie("darkmode", "true", 100);
     } else {
-        setCookie("darkmode", "false");
+        setCookie("darkmode", "false", 100);
     }
 }
 
 function switchDarkmodeSetting() {
-    let darkmode = getDarkmodeSetting();
+    const darkmode = getDarkmodeSetting();
     switch(darkmode) {
         case true:
             setDarkmodeSetting(false);
@@ -52,8 +52,12 @@ function switchDarkmodeSetting() {
     } 
 }
 
-let darkmode = getDarkmodeSetting();
+
-let darkmode_prefer = window.matchMedia('(prefers-color-scheme: dark)').matches;
+const check_darkmode = getDarkmodeSetting();
-if ((darkmode_prefer && darkmode===null) || darkmode) {
+const darkmode_prefer = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    $(".darkmode-label").click();
+if (darkmode_prefer && check_darkmode === null) {
+    autoDarkMode();
+    setDarkmodeSetting(true);
+} else if (check_darkmode) {
+    autoDarkMode();
 }