feat: add light themes

public/js/theme.js

@@ -0,0 +1,69 @@
+function changeTheme() {
+  const element = document.documentElement;
+  const theme = element.classList.contains("dark") ? "light" : "dark";
+
+  const css = document.createElement("style");
+
+  css.appendChild(
+    document.createTextNode(
+      `* {
+           -webkit-transition: none !important;
+           -moz-transition: none !important;
+           -o-transition: none !important;
+           -ms-transition: none !important;
+           transition: none !important;
+        }`,
+    ),
+  );
+  document.head.appendChild(css);
+
+  if (theme === "dark") {
+    element.classList.add("dark");
+  } else {
+    element.classList.remove("dark");
+  }
+
+  window.getComputedStyle(css).opacity;
+  document.head.removeChild(css);
+  localStorage.theme = theme;
+}
+
+function preloadTheme() {
+  const theme = (() => {
+    const userTheme = localStorage.theme;
+
+    if (userTheme === "light" || userTheme === "dark") {
+      return userTheme;
+    } else {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light";
+    }
+  })();
+
+  const element = document.documentElement;
+
+  if (theme === "dark") {
+    element.classList.add("dark");
+  } else {
+    element.classList.remove("dark");
+  }
+
+  localStorage.theme = theme;
+}
+
+window.onload = () => {
+  function initializeThemeButtons() {
+    const headerThemeButton = document.getElementById("header-theme-button");
+    const drawerThemeButton = document.getElementById("drawer-theme-button");
+    headerThemeButton?.addEventListener("click", changeTheme);
+    drawerThemeButton?.addEventListener("click", changeTheme);
+  }
+
+  document.addEventListener("astro:after-swap", initializeThemeButtons);
+  initializeThemeButtons();
+};
+
+document.addEventListener("astro:after-swap", preloadTheme);
+
+preloadTheme();

src/components/BaseHead.astro

@@ -42,6 +42,7 @@ const { title, description } = Astro.props;
 <meta name="description" content={description} />
 
 <!-- Global Scripts -->
+<script is:inline src="/js/theme.js"></script>
 <script is:inline src="/js/scroll.js"></script>
 
 <!-- <ViewTransitions  /> -->

src/components/Header.astro

@@ -46,6 +46,22 @@ const subpath = pathname.match(/[^/]+/g);
       </div>
 
       <div class="buttons absolute right-0 top-1/2 flex -translate-y-1/2 gap-1">
+        <button
+          id="header-theme-button"
+          aria-label={`Toggle light and dark theme`}
+          class={cn(
+            "hidden md:flex",
+            "size-9 rounded-full p-2 items-center justify-center",
+            "bg-transparent hover:bg-black/5 dark:hover:bg-white/20",
+            "stroke-current hover:stroke-black hover:dark:stroke-white",
+            "border border-black/10 dark:border-white/25",
+            "transition-colors duration-300 ease-in-out",
+          )}
+        >
+          <Icon name="sun" class="block size-full dark:hidden" />
+          <Icon name="moon" class="hidden size-full dark:block" />
+        </button>
+
         <button
           id="header-drawer-button"
           aria-label={`Toggle drawer open and closed`}