Fix mode button weird behavior and refactor

Author: mcecode

src/layout/body/header.astro

@@ -139,6 +139,7 @@ import {
   ) as unknown as SVGGElement;
   const modeSun = document.getElementById(modeSunId) as unknown as SVGGElement;
 
+  darkModeMedia.addEventListener("change", setModeTitleBasedOnMedia);
   function setModeTitleBasedOnMedia() {
     if (darkModeMedia.matches) {
       modeTitle.textContent = "Light mode";
@@ -148,37 +149,22 @@ import {
     modeTitle.textContent = "Dark mode";
   }
 
-  function resetModeSvgState(mode: Mode) {
-    switch (mode) {
-      case "light": {
-        modeMoon.style.opacity = "1";
-        modeSun.style.opacity = "0";
-        break;
-      }
-      case "dark": {
-        modeMoon.style.opacity = "0";
-        modeSun.style.opacity = "1";
-        break;
-      }
-    }
-
-    modeMoon.classList.remove("rotate-appear");
-    modeMoon.classList.remove("rotate-vanish");
-    modeSun.classList.remove("rotate-appear");
-    modeSun.classList.remove("rotate-vanish");
-  }
-
-  let isSetModeFirstRun = true;
-  function setMode(mode: Mode) {
+  modeButton.addEventListener("click", () => {
+    setMode(modeTitle.textContent === "Light mode" ? "light" : "dark");
+  });
+  function setMode(mode: Mode, animateModeSvg = true) {
     switch (mode) {
       case "light": {
         rootStyle.setProperty("--c-foreground", colors.black);
         rootStyle.setProperty("--c-background", colors.white);
         rootStyle.setProperty("--c-accent", colors.grayDark);
 
-        if (!isSetModeFirstRun) {
+        if (animateModeSvg) {
           modeMoon.classList.add("rotate-appear");
           modeSun.classList.add("rotate-vanish");
+        } else {
+          modeMoon.style.opacity = "1";
+          modeSun.style.opacity = "0";
         }
 
         modeTitle.textContent = "Dark mode";
@@ -190,9 +176,12 @@ import {
         rootStyle.setProperty("--c-background", colors.black);
         rootStyle.setProperty("--c-accent", colors.grayLight);
 
-        if (!isSetModeFirstRun) {
+        if (animateModeSvg) {
           modeMoon.classList.add("rotate-vanish");
           modeSun.classList.add("rotate-appear");
+        } else {
+          modeMoon.style.opacity = "0";
+          modeSun.style.opacity = "1";
         }
 
         modeTitle.textContent = "Light mode";
@@ -201,39 +190,47 @@ import {
       }
     }
 
-    if (isSetModeFirstRun) {
-      // Once the user has set a mode preference, follow that instead of the
-      // system default.
-      darkModeMedia.removeEventListener("change", setModeTitleBasedOnMedia);
-      // On initial load, shows the moon on the mode button for light mode.
-      resetModeSvgState(mode);
-
-      isSetModeFirstRun = false;
-    }
+    // Once the user has set a mode preference, follow that instead of the
+    // system default.
+    darkModeMedia.removeEventListener("change", setModeTitleBasedOnMedia);
   }
 
-  darkModeMedia.addEventListener("change", setModeTitleBasedOnMedia);
   // Mode moon and sun animations end at the same time so put 'animationend'
   // handling on only one of them.
   modeMoon.addEventListener("animationend", () => {
-    const storedMode = localStorage.getItem("mode") as Mode | undefined;
+    const storedMode = localStorage.getItem("mode") as Mode | null;
 
-    if (typeof storedMode !== "undefined") {
-      resetModeSvgState(storedMode);
+    if (storedMode === null) {
+      return;
     }
-  });
-  modeButton.addEventListener("click", () => {
-    setMode(modeTitle.textContent === "Light mode" ? "light" : "dark");
+
+    switch (storedMode) {
+      case "light": {
+        modeMoon.style.opacity = "1";
+        modeSun.style.opacity = "0";
+        break;
+      }
+      case "dark": {
+        modeMoon.style.opacity = "0";
+        modeSun.style.opacity = "1";
+        break;
+      }
+    }
+
+    modeMoon.classList.remove("rotate-appear");
+    modeMoon.classList.remove("rotate-vanish");
+    modeSun.classList.remove("rotate-appear");
+    modeSun.classList.remove("rotate-vanish");
   });
 
   addEventListener("DOMContentLoaded", () => {
-    const storedMode = localStorage.getItem("mode") as Mode | undefined;
+    const storedMode = localStorage.getItem("mode") as Mode | null;
 
-    if (typeof storedMode === "undefined") {
+    if (storedMode === null) {
       setModeTitleBasedOnMedia();
       return;
     }
 
-    setMode(storedMode);
+    setMode(storedMode, false);
   });
 </script>