Fix initial state of mode button on light mode

Author: mcecode

src/layout/body/header.astro

@@ -148,18 +148,35 @@ import {
     modeTitle.textContent = "Dark mode";
   }
 
-  function setMode(mode: Mode, animateModeSvg = true) {
-    // Once the user has set a mode preference, follow that instead of the
-    // system default.
-    darkModeMedia.removeEventListener("change", setModeTitleBasedOnMedia);
+  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) {
     switch (mode) {
       case "light": {
         rootStyle.setProperty("--c-foreground", colors.black);
         rootStyle.setProperty("--c-background", colors.white);
         rootStyle.setProperty("--c-accent", colors.grayDark);
 
-        if (animateModeSvg) {
+        if (!isSetModeFirstRun) {
           modeMoon.classList.add("rotate-appear");
           modeSun.classList.add("rotate-vanish");
         }
@@ -173,7 +190,7 @@ import {
         rootStyle.setProperty("--c-background", colors.black);
         rootStyle.setProperty("--c-accent", colors.grayLight);
 
-        if (animateModeSvg) {
+        if (!isSetModeFirstRun) {
           modeMoon.classList.add("rotate-vanish");
           modeSun.classList.add("rotate-appear");
         }
@@ -183,32 +200,19 @@ import {
         break;
       }
     }
-  }
 
-  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;
-      }
-    }
+    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);
 
-    modeMoon.classList.remove("rotate-appear");
-    modeMoon.classList.remove("rotate-vanish");
-    modeSun.classList.remove("rotate-appear");
-    modeSun.classList.remove("rotate-vanish");
+      isSetModeFirstRun = false;
+    }
   }
 
   darkModeMedia.addEventListener("change", setModeTitleBasedOnMedia);
-  modeButton.addEventListener("click", () => {
-    setMode(modeTitle.textContent === "Light mode" ? "light" : "dark");
-  });
   // Mode moon and sun animations end at the same time so put 'animationend'
   // handling on only one of them.
   modeMoon.addEventListener("animationend", () => {
@@ -218,6 +222,9 @@ import {
       resetModeSvgState(storedMode);
     }
   });
+  modeButton.addEventListener("click", () => {
+    setMode(modeTitle.textContent === "Light mode" ? "light" : "dark");
+  });
 
   addEventListener("DOMContentLoaded", () => {
     const storedMode = localStorage.getItem("mode") as Mode | undefined;
@@ -227,8 +234,6 @@ import {
       return;
     }
 
-    // Do not animate mode SVG on the first run, it is already in the correct
-    // state.
-    setMode(storedMode, false);
+    setMode(storedMode);
   });
 </script>