Theme: Toggle theme without passing boolean value

Adds new toggleTheme function, along with aliases
for existing mf and useNewTheme functions

Add new site in old site footer, and old site in new
site footer, for console free toggling

Add konami code to toggle

Author: nginx-jack

layouts/_default/baseof.html

@@ -24,10 +24,9 @@
 
 
   <script>
-    
-    function useNewTheme(isNewTheme) {
-      localStorage.setItem("useNewTheme", `${isNewTheme}`);
 
+    const setTheme = (isNewTheme) => {
+      localStorage.setItem("useNewTheme", `${isNewTheme}`);
       // swap out v1 and v2 css style
       const v1cssIds = [
         "cssFA1",
@@ -39,35 +38,35 @@
         "css3",
         "css4",
         "css5",
-        "css6"
+        "css6",
       ];
 
       v1cssIds.forEach((cssId) => {
-        const element =  document.getElementById(cssId);
+        const element = document.getElementById(cssId);
         if (element !== null) {
           element.disabled = isNewTheme;
         }
       });
 
       const v2cssIds = ["css7"];
       v2cssIds.forEach((cssId) => {
-        const element =  document.getElementById(cssId);
+        const element = document.getElementById(cssId);
         if (element !== null) {
           element.disabled = !isNewTheme;
         }
       });
 
       // swap out v1 and v2 elements
-      const v1ElementIds = ["sidebar", "footer", "toc"]
+      const v1ElementIds = ["sidebar", "footer", "toc"];
 
       v1ElementIds.forEach((elementId) => {
-        const element =  document.getElementById(elementId);
+        const element = document.getElementById(elementId);
         if (element !== null) {
           element.style.display = isNewTheme ? "none" : "";
         }
 
         const trustarc = document.getElementById("teconsent-v1");
-        if(trustarc) {
+        if (trustarc) {
           trustarc.id = isNewTheme ? "teconsent-v1" : "teconsent";
         }
       });
@@ -78,31 +77,51 @@
 
       document.querySelectorAll(".highlight").forEach((codeblock) => {
         codeblock.style.display = isNewTheme ? "none" : "";
-      })
+      });
 
       const mfElements = ['[data-mf="true"]'];
       mfElements.forEach((elementId) => {
-        document.querySelectorAll(elementId).forEach(
-            (element) => {
-              element.style.display = isNewTheme ? "" : "none";
-
-              const trustarc = document.getElementById("teconsent-v2");
-              if(trustarc) {
-                trustarc.id = isNewTheme ?  "teconsent" : "teconsent-v2";
-              }
-            }
-          );
+        document.querySelectorAll(elementId).forEach((element) => {
+          element.style.display = isNewTheme ? "" : "none";
+
+          const trustarc = document.getElementById("teconsent-v2");
+          if (trustarc) {
+            trustarc.id = isNewTheme ? "teconsent" : "teconsent-v2";
+          }
+        });
       });
 
       document.getElementById("body").style.visibility = "visible";
+    };
+
+    const toggleTheme = () => {
+      setTheme(!(localStorage.getItem("useNewTheme") === "true"));
+    };
+
+    // toggle theme aliases
+    const mf = toggleTheme;
+    const useNewTheme = toggleTheme;
+
+    document.addEventListener("DOMContentLoaded", () => {
+      setTheme(localStorage.getItem("useNewTheme") === "true");
+    });
+
+    function konami(callback) {
+      let kkeys = [];
+      // up,up,down,down,left,right,left,right,B,A
+      const konami = "38,38,40,40,37,39,37,39,66,65";
+      return (event) => {
+        kkeys.push(event.keyCode);
+        if (kkeys.toString().indexOf(konami) >= 0) {
+          callback(event);
+          kkeys = [];
+        }
+      };
     }
-
-    const mf = useNewTheme;
-    
-    document.addEventListener("DOMContentLoaded", function () {
-      useNewTheme(localStorage.getItem("useNewTheme") === "true");
-    })
-
+    const handler = konami(() => {
+      mf();
+    });
+    window.addEventListener("keydown", handler);
 
   </script>
 

layouts/partials/footer-v2.html

@@ -34,6 +34,11 @@
             target="_blank"
             >Do Not Sell My Personal Information
         </a>
+        <a
+            href="#"
+            onclick="mf()"
+            > Back to Old Site
+        </a>
         <span id="teconsent-v2"></span>
     </div>
 </div>

layouts/partials/footer.html

@@ -274,6 +274,11 @@
             >Do Not Sell My Personal Information</a
           >
           <span id="teconsent-v1"></span>
+          <a
+            href="#"
+            onclick="mf()"
+            >New Site Preview
+          </a>
         </p>
       </div>
     </div>