Move themeToggle script into layout

src/components/Head.astro

@@ -55,7 +55,6 @@ const { title, description } = Astro.props;
     };
 
     setTheme();
-
     document.addEventListener("astro:after-swap", setTheme);
   </script>
 </head>

src/components/Nav.astro

@@ -34,20 +34,3 @@ const routes = ["blog", "tracks"];
     </div>
   </div>
 </nav>
-
-<script>
-  const setToggleListener = () => {
-    const toggleBtn = document.querySelector("#theme-toggle");
-
-    toggleBtn?.addEventListener("click", () => {
-      const element = document.documentElement;
-      element.classList.toggle("dark");
-
-      const isDark = element.classList.contains("dark");
-      localStorage.setItem("theme", isDark ? "dark" : "light");
-    });
-  };
-
-  setToggleListener();
-  document.addEventListener("astro:after-swap", setToggleListener);
-</script>

src/layouts/PageLayout.astro

@@ -30,3 +30,20 @@ const { title, description, pubDate, modDate, slug } = Astro.props;
     <Footer />
   </body>
 </html>
+
+<script>
+  const setToggleListener = () => {
+    const toggleBtn = document.querySelector("#theme-toggle");
+
+    toggleBtn?.addEventListener("click", () => {
+      const element = document.documentElement;
+      element.classList.toggle("dark");
+
+      const isDark = element.classList.contains("dark");
+      localStorage.setItem("theme", isDark ? "dark" : "light");
+    });
+  };
+
+  setToggleListener();
+  document.addEventListener("astro:after-swap", setToggleListener);
+</script>