From 75fe7d0f5643b2ce8bfa96de24378e11d5c4f0f0 Mon Sep 17 00:00:00 2001
From: rxyhn <rxyhn.dev@gmail.com>
Date: Wed, 11 Sep 2024 20:12:36 +0700
Subject: [PATCH] feat: add light themes

---
 public/js/theme.js            | 69 +++++++++++++++++++++++++++++++++++
 src/components/BaseHead.astro |  1 +
 src/components/Header.astro   | 16 ++++++++
 3 files changed, 86 insertions(+)
 create mode 100644 public/js/theme.js

diff --git a/public/js/theme.js b/public/js/theme.js
new file mode 100644
index 0000000..d728a1b
--- /dev/null
+++ b/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();
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index bec1edd..febefd7 100644
--- a/src/components/BaseHead.astro
+++ b/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  /> -->
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 094ebfc..c391099 100644
--- a/src/components/Header.astro
+++ b/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`}