Merge pull request #45 from gurusabarish/auto-darkmode-fix

Auto darkmode fix for #37 by @lr1980

.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,23 +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');
+      switchDarkmodeSetting();
-        $('.darkmode-text-muted').addClass('text-muted').removeClass('darkmode-text-muted');
-      };
     });
-    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');
-    };
   </script>
+
 </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,33 +158,13 @@
       $(".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");
+      switchDarkmodeSetting();
-      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");
-      }
     });
-    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");
-    }
   </script>
 </body>
 {{ else }}

static/js/auto_darkmode.js

@@ -0,0 +1,63 @@
+function setCookie(name,value,days) {
+    var expires = "";
+    if (days) {
+        var date = new Date();
+        date.setTime(date.getTime() + (days*24*60*60*1000));
+        expires = "; expires=" + date.toUTCString();
+    }
+    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() {
+    switch(getCookie("darkmode")) {
+        case "true":
+            return true;
+        case "false":
+            return false;
+        default:
+            return null;
+    }
+}
+
+function setDarkmodeSetting(value) {
+    if (value) {
+        setCookie("darkmode", "true", 100);
+    } else {
+        setCookie("darkmode", "false", 100);
+    }
+}
+
+function switchDarkmodeSetting() {
+    const darkmode = getDarkmodeSetting();
+    switch(darkmode) {
+        case true:
+            setDarkmodeSetting(false);
+            break;
+        case false:
+            setDarkmodeSetting(true);
+            break;
+        default:
+            setDarkmodeSetting(true);
+            break;
+    } 
+}
+
+
+const check_darkmode = getDarkmodeSetting();
+const darkmode_prefer = window.matchMedia('(prefers-color-scheme: dark)').matches;
+if (darkmode_prefer && check_darkmode === null) {
+    autoDarkMode();
+    setDarkmodeSetting(true);
+} else if (check_darkmode) {
+    autoDarkMode();
+}