@wrksz/themes 0.2.1 → 0.3.0

package/README.md

@@ -66,6 +66,7 @@ export function ThemeToggle() {
 | `storageKey` | `string` | `"theme"` | Key used for storage |
 | `storage` | `"localStorage" \| "sessionStorage" \| "none"` | `"localStorage"` | Where to persist the theme |
 | `disableTransitionOnChange` | `boolean` | `false` | Disable CSS transitions when switching themes |
+| `followSystem` | `boolean` | `false` | Always follow system preference changes, even after `setTheme` was called |
 | `themeColor` | `string \| Record<string, string>` | - | Update `<meta name="theme-color">` on theme change |
 | `nonce` | `string` | - | CSP nonce for the inline script |
 | `onThemeChange` | `(theme: string) => void` | - | Called whenever the resolved theme changes |

package/dist/index.d.ts

@@ -35,6 +35,8 @@ type ThemeProviderProps<Themes extends string = DefaultTheme> = {
 	onThemeChange?: (theme: Themes) => void;
 	/** Colors for meta theme-color tag, per theme or a single value */
 	themeColor?: ThemeColor;
+	/** Always follow system preference changes, even after setTheme was called */
+	followSystem?: boolean;
 };
 type ThemeContextValue<Themes extends string = DefaultTheme> = {
 	/** Current theme (may be "system") */
@@ -52,5 +54,5 @@ type ThemeContextValue<Themes extends string = DefaultTheme> = {
 };
 declare function useTheme<Themes extends string = DefaultTheme>(): ThemeContextValue<Themes>;
 import { ReactElement } from "react";
-declare function ThemeProvider<Themes extends string = DefaultTheme>({ children, themes, forcedTheme, enableSystem, defaultTheme, attribute, value: valueMap, target, disableTransitionOnChange, storage, storageKey, enableColorScheme, nonce, onThemeChange, themeColor }: ThemeProviderProps<Themes>): ReactElement;
+declare function ThemeProvider<Themes extends string = DefaultTheme>({ children, themes, forcedTheme, enableSystem, defaultTheme, attribute, value: valueMap, target, disableTransitionOnChange, storage, storageKey, enableColorScheme, nonce, onThemeChange, themeColor, followSystem }: ThemeProviderProps<Themes>): ReactElement;
 export { useTheme, ValueObject, ThemeProviderProps, ThemeProvider, ThemeContextValue, ThemeColor, StorageType, DefaultTheme, Attribute };

package/dist/index.js

@@ -13,39 +13,41 @@ function useTheme() {
 import { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
 
 // src/store.ts
-var state = { theme: undefined, systemTheme: undefined };
-var listeners = new Set;
-function emit() {
-  for (const listener of listeners)
-    listener();
-}
 var SERVER_SNAPSHOT = { theme: undefined, systemTheme: undefined };
-var themeStore = {
-  subscribe(listener) {
-    listeners.add(listener);
-    return () => {
-      listeners.delete(listener);
-    };
-  },
-  getSnapshot() {
-    return state;
-  },
-  getServerSnapshot() {
-    return SERVER_SNAPSHOT;
-  },
-  setTheme(theme) {
-    if (state.theme === theme)
-      return;
-    state = { ...state, theme };
-    emit();
-  },
-  setSystemTheme(systemTheme) {
-    if (state.systemTheme === systemTheme)
-      return;
-    state = { ...state, systemTheme };
-    emit();
+function createThemeStore() {
+  let state = { theme: undefined, systemTheme: undefined };
+  const listeners = new Set;
+  function emit() {
+    for (const listener of listeners)
+      listener();
   }
-};
+  return {
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    getSnapshot() {
+      return state;
+    },
+    getServerSnapshot() {
+      return SERVER_SNAPSHOT;
+    },
+    setTheme(theme) {
+      if (state.theme === theme)
+        return;
+      state = { ...state, theme };
+      emit();
+    },
+    setSystemTheme(systemTheme) {
+      if (state.systemTheme === systemTheme)
+        return;
+      state = { ...state, systemTheme };
+      emit();
+    }
+  };
+}
 
 // src/client-provider.tsx
 import { jsxDEV } from "react/jsx-dev-runtime";
@@ -81,10 +83,14 @@ function ClientThemeProvider({
   storageKey = "theme",
   enableColorScheme = true,
   themeColor,
+  followSystem = false,
   onThemeChange
 }) {
   const resolvedDefault = defaultTheme ?? (enableSystem ? "system" : "light");
-  const { theme, systemTheme } = useSyncExternalStore(themeStore.subscribe, themeStore.getSnapshot, themeStore.getServerSnapshot);
+  const storeRef = useRef(createThemeStore());
+  const store = storeRef.current;
+  const { getSnapshot, setTheme: setStoreTheme, setSystemTheme: setStoreSystemTheme } = store;
+  const { theme, systemTheme } = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);
   const resolvedTheme = forcedTheme ?? (theme === "system" || theme === undefined ? systemTheme : theme);
   const onThemeChangeRef = useRef(onThemeChange);
   useEffect(() => {
@@ -134,37 +140,68 @@ function ClientThemeProvider({
     themeColor
   ]);
   useEffect(() => {
+    const mq = enableSystem ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+    const sys = mq ? mq.matches ? "dark" : "light" : undefined;
+    if (sys)
+      setStoreSystemTheme(sys);
     if (forcedTheme) {
-      themeStore.setTheme(forcedTheme);
-      return;
+      setStoreTheme(forcedTheme);
+      applyToDom(forcedTheme);
+    } else {
+      let stored = null;
+      try {
+        if (storage !== "none") {
+          const s = storage === "localStorage" ? localStorage : sessionStorage;
+          stored = s.getItem(storageKey);
+        }
+      } catch {}
+      const initial = stored && themes.includes(stored) ? stored : resolvedDefault;
+      setStoreTheme(initial);
+      applyToDom(initial === "system" ? sys ?? "light" : initial);
     }
-    let stored = null;
-    try {
-      if (storage !== "none") {
-        const store = storage === "localStorage" ? localStorage : sessionStorage;
-        stored = store.getItem(storageKey);
-      }
-    } catch {}
-    const initial = stored && themes.includes(stored) ? stored : resolvedDefault;
-    themeStore.setTheme(initial);
-  }, [forcedTheme, resolvedDefault, storage, storageKey, themes]);
-  useEffect(() => {
-    if (!enableSystem)
+    if (!mq)
       return;
-    const mq = window.matchMedia("(prefers-color-scheme: dark)");
-    themeStore.setSystemTheme(mq.matches ? "dark" : "light");
     const handler = (e) => {
       const next = e.matches ? "dark" : "light";
-      themeStore.setSystemTheme(next);
-      const current = themeStore.getSnapshot().theme;
-      if (current === "system" || current === undefined) {
+      setStoreSystemTheme(next);
+      const current = getSnapshot().theme;
+      if (current === "system" || current === undefined || followSystem) {
+        if (followSystem) {
+          setStoreTheme("system");
+        }
         applyToDom(next);
         onThemeChangeRef.current?.(next);
       }
     };
     mq.addEventListener("change", handler);
     return () => mq.removeEventListener("change", handler);
-  }, [enableSystem, applyToDom]);
+  }, [
+    forcedTheme,
+    resolvedDefault,
+    storage,
+    storageKey,
+    themes,
+    enableSystem,
+    followSystem,
+    applyToDom,
+    getSnapshot,
+    setStoreTheme,
+    setStoreSystemTheme
+  ]);
+  useEffect(() => {
+    const handler = () => {
+      const { theme: theme2, systemTheme: systemTheme2 } = getSnapshot();
+      const resolved = forcedTheme ?? (theme2 === "system" || theme2 === undefined ? systemTheme2 : theme2);
+      if (resolved)
+        applyToDom(resolved);
+    };
+    window.addEventListener("pageshow", handler);
+    window.addEventListener("popstate", handler);
+    return () => {
+      window.removeEventListener("pageshow", handler);
+      window.removeEventListener("popstate", handler);
+    };
+  }, [applyToDom, forcedTheme, getSnapshot]);
   useEffect(() => {
     if (storage === "none")
       return;
@@ -173,30 +210,30 @@ function ClientThemeProvider({
         return;
       if (themes.includes(e.newValue)) {
         const newTheme = e.newValue;
-        const resolved = newTheme === "system" ? themeStore.getSnapshot().systemTheme ?? "light" : newTheme;
-        themeStore.setTheme(newTheme);
+        const resolved = newTheme === "system" ? getSnapshot().systemTheme ?? "light" : newTheme;
+        setStoreTheme(newTheme);
         applyToDom(resolved);
       }
     };
     window.addEventListener("storage", handler);
     return () => window.removeEventListener("storage", handler);
-  }, [storage, storageKey, themes, applyToDom]);
+  }, [storage, storageKey, themes, applyToDom, getSnapshot, setStoreTheme]);
   const setTheme = useCallback((next) => {
     if (forcedTheme)
       return;
-    const current = themeStore.getSnapshot().theme;
+    const current = getSnapshot().theme;
     const newTheme = typeof next === "function" ? next(current) : next;
-    const resolved = newTheme === "system" ? themeStore.getSnapshot().systemTheme ?? "light" : newTheme;
-    themeStore.setTheme(newTheme);
+    const resolved = newTheme === "system" ? getSnapshot().systemTheme ?? "light" : newTheme;
+    setStoreTheme(newTheme);
     applyToDom(resolved);
     onThemeChangeRef.current?.(resolved);
     try {
       if (storage !== "none") {
-        const store = storage === "localStorage" ? localStorage : sessionStorage;
-        store.setItem(storageKey, newTheme);
+        const store2 = storage === "localStorage" ? localStorage : sessionStorage;
+        store2.setItem(storageKey, newTheme);
       }
     } catch {}
-  }, [applyToDom, forcedTheme, storage, storageKey]);
+  }, [applyToDom, forcedTheme, storage, storageKey, getSnapshot, setStoreTheme]);
   const contextValue = {
     theme: forcedTheme ?? theme,
     resolvedTheme,
@@ -295,7 +332,8 @@ function ThemeProvider({
   enableColorScheme = true,
   nonce,
   onThemeChange,
-  themeColor
+  themeColor,
+  followSystem = false
 }) {
   const resolvedDefault = defaultTheme ?? (enableSystem ? "system" : "light");
   return /* @__PURE__ */ jsxDEV2(Fragment, {
@@ -331,6 +369,7 @@ function ThemeProvider({
         storageKey,
         enableColorScheme,
         themeColor,
+        followSystem,
         onThemeChange,
         children
       }, undefined, false, undefined, this)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrksz/themes",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "A modern, fully-featured theme management library for Next.js",
   "repository": {
     "type": "git",
@@ -17,6 +17,7 @@
     "lint": "biome check src",
     "lint:fix": "biome check --write src",
     "format": "biome format --write src",
+    "test": "bun test",
     "prepare": "[ \"$CI\" = \"true\" ] || lefthook install"
   },
   "devDependencies": {
@@ -25,6 +26,7 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "bunup": "^0.16.31",
+    "happy-dom": "^20.8.4",
     "lefthook": "^2.1.4",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",