@vueless/storybook-dark-mode 10.0.7 → 10.0.8-beta.1

package/dist/manager.js

@@ -86,10 +86,16 @@ updateManager(store());
 
 // src/Tool.tsx
 function DarkMode({ api }) {
-  const [isDark, setDark] = React.useState(prefersDark.matches);
+  const [isDark, setDark] = React.useState(() => {
+    const current = store().current;
+    return current === "dark";
+  });
   const darkModeParams = useParameter("darkMode", {});
   const { current: defaultMode, stylePreview, ...params } = darkModeParams;
   const channel = api.getChannel();
+  const darkModeParamsRef = React.useRef(darkModeParams);
+  darkModeParamsRef.current = darkModeParams;
+  const deferredSysThemeRef = React.useRef(null);
   const userHasExplicitlySetTheTheme = React.useMemo(
     () => store(params).userHasExplicitlySetTheTheme,
     [params]
@@ -116,12 +122,15 @@ function DarkMode({ api }) {
     },
     [setMode]
   );
-  function prefersDarkUpdate(event) {
-    if (userHasExplicitlySetTheTheme || defaultMode) {
-      return;
-    }
-    updateMode(event.matches ? "dark" : "light");
-  }
+  const prefersDarkUpdate = React.useCallback(
+    (event) => {
+      if (userHasExplicitlySetTheTheme || defaultMode) {
+        return;
+      }
+      updateMode(event.matches ? "dark" : "light");
+    },
+    [userHasExplicitlySetTheTheme, defaultMode, updateMode]
+  );
   const renderTheme = React.useCallback(() => {
     const { current = "light" } = store();
     setMode(current);
@@ -132,13 +141,49 @@ function DarkMode({ api }) {
     updateStore({ ...currentStore2, userHasExplicitlySetTheTheme: true });
   };
   React.useEffect(() => {
+    if (deferredSysThemeRef.current !== null) {
+      clearTimeout(deferredSysThemeRef.current);
+      deferredSysThemeRef.current = null;
+    }
     const currentStore2 = store();
-    updateStore({
+    const previewCurrent = darkModeParams.current;
+    const persistedCurrent = currentStore2.current;
+    const base = {
       ...currentStore2,
-      ...darkModeParams,
-      current: currentStore2.current || darkModeParams.current
-    });
+      ...darkModeParams
+    };
+    if (previewCurrent !== void 0) {
+      updateStore({ ...base, current: previewCurrent });
+      renderTheme();
+      return;
+    }
+    if (persistedCurrent) {
+      updateStore({ ...base, current: persistedCurrent });
+      renderTheme();
+      return;
+    }
+    updateStore({ ...base, current: "light" });
     renderTheme();
+    deferredSysThemeRef.current = setTimeout(() => {
+      deferredSysThemeRef.current = null;
+      const latestParams = darkModeParamsRef.current;
+      if (latestParams.current !== void 0) {
+        const cs2 = store();
+        updateStore({ ...cs2, ...latestParams, current: latestParams.current });
+        renderTheme();
+        return;
+      }
+      const cs = store();
+      const nextCurrent = prefersDark.matches ? "dark" : "light";
+      updateStore({ ...cs, ...latestParams, current: nextCurrent });
+      renderTheme();
+    }, 0);
+    return () => {
+      if (deferredSysThemeRef.current !== null) {
+        clearTimeout(deferredSysThemeRef.current);
+        deferredSysThemeRef.current = null;
+      }
+    };
   }, [darkModeParams, renderTheme]);
   React.useEffect(() => {
     channel.on(STORY_CHANGED, renderTheme);
@@ -151,21 +196,19 @@ function DarkMode({ api }) {
       channel.removeListener(DOCS_RENDERED, renderTheme);
       prefersDark.removeListener(prefersDarkUpdate);
     };
-  });
+  }, [channel, renderTheme, prefersDarkUpdate]);
   React.useEffect(() => {
     channel.on(UPDATE_DARK_MODE_EVENT_NAME, updateMode);
     return () => {
       channel.removeListener(UPDATE_DARK_MODE_EVENT_NAME, updateMode);
     };
-  });
+  }, [channel, updateMode]);
   React.useEffect(() => {
     if (userHasExplicitlySetTheTheme) {
       return;
     }
     if (defaultMode) {
       updateMode(defaultMode);
-    } else if (prefersDark.matches) {
-      updateMode("dark");
     }
   }, [defaultMode, updateMode, userHasExplicitlySetTheTheme]);
   return /* @__PURE__ */ React.createElement(
@@ -185,7 +228,7 @@ var Tool_default = DarkMode;
 
 // src/preset/manager.tsx
 var currentStore = store();
-var currentTheme = currentStore.current || prefersDark.matches && "dark" || "light";
+var currentTheme = currentStore.current ?? "light";
 addons.setConfig({
   theme: {
     ...themes[currentTheme],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueless/storybook-dark-mode",
-  "version": "10.0.7",
+  "version": "10.0.8-beta.1",
   "description": "Toggle between light and dark mode in Storybook",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "repository": {
@@ -25,37 +25,37 @@
   },
   "dependencies": {
     "@storybook/global": "^5.0.0",
-    "lodash-es": "^4.17.23"
+    "lodash-es": "^4.18.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.33.0",
+    "@eslint/js": "^9.39.4",
     "@release-it/bumper": "^7.0.5",
-    "@release-it/conventional-changelog": "^10.0.4",
-    "@storybook/builder-vite": "^10.0.4",
-    "@storybook/icons": "^1.4.0",
-    "@storybook/react": "^10.0.4",
-    "@storybook/react-vite": "^10.0.4",
-    "@stylistic/eslint-plugin": "^5.2.3",
+    "@release-it/conventional-changelog": "^11.0.0",
+    "@storybook/builder-vite": "^10.3.5",
+    "@storybook/icons": "^2.0.1",
+    "@storybook/react": "^10.3.5",
+    "@storybook/react-vite": "^10.3.5",
+    "@stylistic/eslint-plugin": "^5.10.0",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^24.3.0",
-    "@types/react": "^18.0.26",
-    "eslint": "^9.33.0",
+    "@types/node": "^25.6.0",
+    "@types/react": "^19.2.14",
+    "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "globals": "^15.14.0",
-    "prettier": "^3.6.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "release-it": "^19.2.4",
-    "rimraf": "^3.0.2",
-    "storybook": "^10.0.4",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "globals": "^17.5.0",
+    "prettier": "^3.8.3",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "release-it": "^20.0.1",
+    "rimraf": "^6.1.3",
+    "storybook": "^10.3.5",
     "ts-node": "^10.9.2",
-    "tsup": "^8.0.0",
-    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.40.0",
-    "vite": "^7.1.11"
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.59.0",
+    "vite": "^8.0.10"
   },
   "peerDependencies": {
     "storybook": "^10.0.0"

package/src/Tool.tsx

@@ -21,10 +21,18 @@ interface DarkModeProps {
 
 /** A toolbar icon to toggle between dark and light themes in storybook */
 export function DarkMode({ api }: DarkModeProps) {
-  const [isDark, setDark] = React.useState(prefersDark.matches);
+  const [isDark, setDark] = React.useState(() => {
+    const current = store().current;
+
+    return current === "dark";
+  });
   const darkModeParams = useParameter<Partial<DarkModeStore>>("darkMode", {});
   const { current: defaultMode, stylePreview, ...params } = darkModeParams;
   const channel = api.getChannel();
+  const darkModeParamsRef = React.useRef(darkModeParams);
+
+  darkModeParamsRef.current = darkModeParams;
+  const deferredSysThemeRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
   // Save custom themes on init
   const userHasExplicitlySetTheTheme = React.useMemo(
     () => store(params).userHasExplicitlySetTheTheme,
@@ -60,13 +68,16 @@ export function DarkMode({ api }: DarkModeProps) {
   );
 
   /** Update the theme based on the color preference */
-  function prefersDarkUpdate(event: MediaQueryListEvent) {
-    if (userHasExplicitlySetTheTheme || defaultMode) {
-      return;
-    }
+  const prefersDarkUpdate = React.useCallback(
+    (event: MediaQueryListEvent) => {
+      if (userHasExplicitlySetTheTheme || defaultMode) {
+        return;
+      }
 
-    updateMode(event.matches ? "dark" : "light");
-  }
+      updateMode(event.matches ? "dark" : "light");
+    },
+    [userHasExplicitlySetTheTheme, defaultMode, updateMode],
+  );
 
   /** Render the current theme */
   const renderTheme = React.useCallback(() => {
@@ -85,17 +96,67 @@ export function DarkMode({ api }: DarkModeProps) {
 
   /** When storybook params change update the stored themes */
   React.useEffect(() => {
+    if (deferredSysThemeRef.current !== null) {
+      clearTimeout(deferredSysThemeRef.current);
+      deferredSysThemeRef.current = null;
+    }
+
     const currentStore = store();
+    const previewCurrent = darkModeParams.current;
+    const persistedCurrent = currentStore.current;
 
-    // Ensure we use the stores `current` value first to persist
-    // themeing between page loads and story changes.
-    updateStore({
+    const base = {
       ...currentStore,
       ...darkModeParams,
-      current: currentStore.current || darkModeParams.current,
-    });
+    };
+
+    if (previewCurrent !== undefined) {
+      updateStore({ ...base, current: previewCurrent });
+      renderTheme();
+
+      return;
+    }
+
+    if (persistedCurrent) {
+      updateStore({ ...base, current: persistedCurrent });
+      renderTheme();
+
+      return;
+    }
+
+    // Preview `darkMode.current` can hydrate after the first commit. Avoid applying
+    // prefers-color-scheme until then so `current: 'light'` is not overwritten.
+    updateStore({ ...base, current: "light" });
     renderTheme();
+
+    deferredSysThemeRef.current = setTimeout(() => {
+      deferredSysThemeRef.current = null;
+      const latestParams = darkModeParamsRef.current;
+
+      if (latestParams.current !== undefined) {
+        const cs = store();
+
+        updateStore({ ...cs, ...latestParams, current: latestParams.current });
+        renderTheme();
+
+        return;
+      }
+
+      const cs = store();
+      const nextCurrent = prefersDark.matches ? "dark" : "light";
+
+      updateStore({ ...cs, ...latestParams, current: nextCurrent });
+      renderTheme();
+    }, 0);
+
+    return () => {
+      if (deferredSysThemeRef.current !== null) {
+        clearTimeout(deferredSysThemeRef.current);
+        deferredSysThemeRef.current = null;
+      }
+    };
   }, [darkModeParams, renderTheme]);
+
   React.useEffect(() => {
     channel.on(STORY_CHANGED, renderTheme);
     channel.on(SET_STORIES, renderTheme);
@@ -108,14 +169,15 @@ export function DarkMode({ api }: DarkModeProps) {
       channel.removeListener(DOCS_RENDERED, renderTheme);
       prefersDark.removeListener(prefersDarkUpdate);
     };
-  });
+  }, [channel, renderTheme, prefersDarkUpdate]);
+
   React.useEffect(() => {
     channel.on(UPDATE_DARK_MODE_EVENT_NAME, updateMode);
 
     return () => {
       channel.removeListener(UPDATE_DARK_MODE_EVENT_NAME, updateMode);
     };
-  });
+  }, [channel, updateMode]);
   // Storybook's first render doesn't have the global user params loaded so we
   // need the effect to run whenever defaultMode is updated
   React.useEffect(() => {
@@ -126,8 +188,6 @@ export function DarkMode({ api }: DarkModeProps) {
 
     if (defaultMode) {
       updateMode(defaultMode);
-    } else if (prefersDark.matches) {
-      updateMode("dark");
     }
   }, [defaultMode, updateMode, userHasExplicitlySetTheTheme]);
 

package/src/preset/manager.tsx

@@ -4,10 +4,10 @@ import { themes } from "storybook/theming";
 import * as React from "react";
 
 import Tool from "../Tool";
-import { prefersDark, store } from "../store";
+import { store } from "../store";
 
 const currentStore = store();
-const currentTheme = currentStore.current || (prefersDark.matches && "dark") || "light";
+const currentTheme = currentStore.current ?? "light";
 
 addons.setConfig({
   theme: {