Added dark/light mode plus "Back to Top" button

src/components/Footer.astro

@@ -2,7 +2,14 @@
 const today = new Date();
 ---
 
+<noscript>
+  <style>
+    #back-to-top { display: none; }
+  </style>
+</noscript>
+
 <footer class="footer footer-center block mb-5 pt-10">
+  <dev id="back-to-top" class="btn btn-outline m-4" onclick='window.scrollTo({top: 0, behavior: "smooth"});'>Back to Top</dev>
   <div class="pb-2">
     &copy; {today.getFullYear()} Manuel Ernesto
   </div>
@@ -12,4 +19,21 @@ const today = new Date();
     <a href="https://astrofy-template.netlify.app/" target="_blank" class="font-bold">Astrofy Template ⚡️</a>
   </div>
 </footer>
-<style></style>
+
+<script is:inline>
+  function init(){
+    const doc = document.documentElement;
+    const backToTopButton = document.getElementById("back-to-top");
+
+    if (doc.clientHeight >= doc.scrollHeight - 75) {
+      backToTopButton.style.display = "none";
+    }
+
+    console.log(doc.clientHeight + ", " + doc.scrollHeight);
+  }
+
+  init();
+
+  document.addEventListener("astro:after-swap", init);
+
+</script>

src/components/ThemeSwitcher.astro

@@ -0,0 +1,101 @@
+<noscript>
+  <style>
+    #theme-toggle { display: none; }
+  </style>
+</noscript>
+
+<div>
+  <div class="theme">
+    <button
+      id="theme-toggle"
+      aria-label="Switch to dark theme"
+      class="fixed z-40 top-2 right-2 btn"
+    >
+      <svg
+        id="moon-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 512 512"
+        width="20px"
+        class="fill-current"
+      >
+        <path
+          d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+        ></path>
+      </svg>
+      <svg
+        id="sun-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 512 512"
+        width="20px"
+        class="fill-current"
+      >
+        <path
+          d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"
+        ></path>
+      </svg>
+    </button>
+  </div>
+</div>
+
+<script is:inline>
+  function init() {
+    const themeToggle = document.getElementById("theme-toggle");
+    let currentTheme = localStorage.getItem("theme");
+    switch (currentTheme) {
+      case "dark":
+        enableDarkTheme();
+        break;
+      case "light":
+        enableLightTheme();
+        break;
+      default:
+        enableDarkTheme();
+        break;
+    }
+
+    themeToggle.addEventListener("click", () => {
+      if (document.documentElement.hasAttribute("data-theme")) {
+        currentTheme = document.documentElement.getAttribute("data-theme");
+      }
+      toggleTheme(currentTheme);
+    });
+  }
+
+  init();
+
+  function enableDarkTheme() {
+    document.documentElement.setAttribute("data-theme", "dark");
+    localStorage.setItem("theme", "dark");
+    document.getElementById("sun-icon").style.display = "none";
+    document.getElementById("moon-icon").style.display = "inline";
+  }
+
+  function enableLightTheme() {
+    document.documentElement.setAttribute("data-theme", "light");
+    localStorage.setItem("theme", "light");
+    document.getElementById("sun-icon").style.display = "inline";
+    document.getElementById("moon-icon").style.display = "none";
+  }
+
+  function toggleTheme(currentTheme) {
+    if (currentTheme) {
+      switch (currentTheme) {
+        case "dark":
+          enableLightTheme();
+          break;
+        case "light":
+          enableDarkTheme();
+          break;
+        default:
+          enableDarkTheme();
+          break;
+      }
+    } else {
+      enableDarkTheme();
+    }
+  }
+
+  // document.addEventListener("astro:before-swap", init); // Probably don't need?
+
+  document.addEventListener("astro:after-swap", init);
+</script>

src/layouts/BaseLayout.astro

@@ -4,6 +4,7 @@ import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 import SideBar from "../components/SideBar.astro";
 import { ViewTransitions } from "astro:transitions";
+import ThemeSwitcher from "../components/ThemeSwitcher.astro";
 
 import { SITE_TITLE, SITE_DESCRIPTION, TRANSITION_API } from "../config";
 
@@ -28,6 +29,7 @@ const {
       <input id="my-drawer" type="checkbox" class="drawer-toggle" />
       <div class="drawer-content bg-base-100">
         <Header title={SITE_TITLE} />
+        <ThemeSwitcher />
         <div class="md:flex md:justify-center">
           <main class="p-6 pt-10 lg:max-w-[900px] max-w-[100vw]">
             <slot />