splits dark mode loading and toggle. loads in header

_layouts/base.html

@@ -11,6 +11,8 @@
   - "/assets/js/bootstrap.min.js"
   - "/assets/js/beautifuljekyll.js"
   - "/assets/js/skin-switch.js"
+head-js:
+  - "/assets/js/skin-load.js"
 ---
 
 <!-- TODO: add static fonts, jquery, popper   -->

assets/js/skin-load.js

@@ -0,0 +1,24 @@
+// Function to get the value of a cookie
+function getCookie(name) {
+  var cookieName = name + "=";
+  var decodedCookie = decodeURIComponent(document.cookie);
+  var cookieArray = decodedCookie.split(";");
+
+  for (var i = 0; i < cookieArray.length; i++) {
+    var cookie = cookieArray[i].trim(); // Remove leading/trailing spaces
+
+    if (cookie.substring(0, cookieName.length) === cookieName) {
+      return cookie.substring(cookieName.length, cookie.length);
+    }
+  }
+
+  return null;
+}
+
+window.addEventListener("DOMContentLoaded", () => {
+  if (getCookie("bj-dark-mode") === "true") {
+    let button = document.getElementById("change-skin");
+    document.body.classList.add("page-dark-mode");
+    button.setAttribute("aria-checked", true);
+  }
+});

assets/js/skin-switch.js

@@ -1,4 +1,3 @@
-const button = document.getElementById("change-skin");
 // Function to set a cookie
 function setCookie(name, value, days) {
   var expires = "";
@@ -11,33 +10,14 @@ function setCookie(name, value, days) {
     name + "=" + encodeURIComponent(value) + expires + "; path=/";
 }
 
-// Function to get the value of a cookie
-function getCookie(name) {
-  var cookieName = name + "=";
-  var decodedCookie = decodeURIComponent(document.cookie);
-  var cookieArray = decodedCookie.split(";");
-
-  for (var i = 0; i < cookieArray.length; i++) {
-    var cookie = cookieArray[i];
-    while (cookie.charAt(0) == " ") {
-      cookie = cookie.substring(1);
-    }
-    if (cookie.indexOf(cookieName) == 0) {
-      return cookie.substring(cookieName.length, cookie.length);
-    }
-  }
-  return null;
-}
+const button = document.getElementById("change-skin");
 
 button.addEventListener("click", () => {
   document.body.classList.toggle("page-dark-mode");
 
   let currentTheme = document.body.classList.contains("page-dark-mode");
 
-  setCookie("bj-dark-mode", currentTheme, 9999);
+  setCookie("bj-dark-mode", currentTheme, 999);
   button.setAttribute("aria-checked", currentTheme);
   BeautifulJekyllJS.initNavbar();
 });
-if (getCookie("bj-dark-mode") === "true") {
-  document.body.classList.add("page-dark-mode");
-}