Add light/dark mode functionality

2026-08-14 07:33:07 +08:00 · 2022-09-09 00:48:23 +06:30
parent 74efc50049
commit f995485c09
3 changed files with 35 additions and 1 deletions
@@ -59,3 +59,18 @@
    @apply w-6 h-6 fill-skin-base hover:fill-skin-accent;
  }
 </style>
+
+<script>
+  const themeBtn = document.querySelector("#theme-btn");
+  const htmlClassList = document.querySelector("html")?.classList;
+
+  themeBtn?.addEventListener("click", function () {
+    if (htmlClassList?.contains("theme-dark")) {
+      localStorage.setItem("theme", "light");
+      htmlClassList?.remove("theme-dark");
+    } else {
+      localStorage.setItem("theme", "dark");
+      htmlClassList?.add("theme-dark");
+    }
+  });
+</script>