Add nanostore atom, for being able to subscribing to its change

Author: psd-coder

src/lib/theme.ts

@@ -1,6 +1,6 @@
-type Theme = "light" | "dark";
+export type Theme = "light" | "dark";
 
-function getCurrentTheme(): Theme {
+export function getCurrentTheme(): Theme {
   return (document.documentElement.dataset.theme ?? "light") as Theme;
 }
 
@@ -20,4 +20,8 @@ export function observeThemeChange(cb: (theme: Theme) => void) {
 
   // Initial value
   cb(getCurrentTheme());
+
+  return () => {
+    observer.disconnect();
+  };
 }

src/stores/theme.ts

@@ -0,0 +1,10 @@
+import { atom, onMount } from "nanostores";
+import { getCurrentTheme, observeThemeChange } from "~/lib/theme";
+
+export const $theme = atom(getCurrentTheme());
+
+onMount($theme, () => {
+  return observeThemeChange((theme) => {
+    $theme.set(theme);
+  });
+});