Redesign

stores/useThemeStore.ts

@@ -0,0 +1,43 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+const STORAGE_KEY = "theme";
+
+function getTheme(): "light" | "dark" {
+    if (typeof document === "undefined") return "light";
+    return document.documentElement.classList.contains("dark-theme") ? "dark" : "light";
+}
+
+function getThemeSnapshot(): "light" | "dark" {
+    return getTheme();
+}
+
+function getServerSnapshot(): "light" | "dark" {
+    return "light";
+}
+
+const listeners = new Set<() => void>();
+
+function subscribe(cb: () => void) {
+    listeners.add(cb);
+    return () => listeners.delete(cb);
+}
+
+function notifyListeners() {
+    listeners.forEach((cb) => cb());
+}
+
+export function useTheme(): "light" | "dark" {
+    return useSyncExternalStore(subscribe, getThemeSnapshot, getServerSnapshot);
+}
+
+export function useSetTheme() {
+    return function setTheme() {
+        const isDark = document.documentElement.classList.toggle("dark-theme");
+        try {
+            localStorage.setItem(STORAGE_KEY, isDark ? "dark" : "light");
+        } catch {}
+        notifyListeners();
+    };
+}