@nobertdev/react-confirm-dialog 1.1.1 → 1.1.2

package/dist/index.js

@@ -397,15 +397,42 @@ var DEFAULT_STATE = {
   variant: "default",
   icon: void 0
 };
+function detectDarkFromDOM() {
+  var _a;
+  if (typeof document === "undefined") return null;
+  const el = document.documentElement;
+  if (el.classList.contains("dark")) return true;
+  if (el.classList.contains("light")) return false;
+  const dataTheme = (_a = el.getAttribute("data-theme")) != null ? _a : el.getAttribute("data-mode");
+  if (dataTheme === "dark") return true;
+  if (dataTheme === "light") return false;
+  return null;
+}
 function usePrefersDark() {
-  const [dark, setDark] = (0, import_react3.useState)(
-    () => typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)").matches : false
-  );
+  const [dark, setDark] = (0, import_react3.useState)(() => {
+    if (typeof window === "undefined") return false;
+    const domDark = detectDarkFromDOM();
+    if (domDark !== null) return domDark;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  });
   (0, import_react3.useEffect)(() => {
+    const observer = new MutationObserver(() => {
+      const domDark = detectDarkFromDOM();
+      if (domDark !== null) setDark(domDark);
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme", "data-mode"]
+    });
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
-    const handler = (e) => setDark(e.matches);
-    mq.addEventListener("change", handler);
-    return () => mq.removeEventListener("change", handler);
+    const mqHandler = (e) => {
+      if (detectDarkFromDOM() === null) setDark(e.matches);
+    };
+    mq.addEventListener("change", mqHandler);
+    return () => {
+      observer.disconnect();
+      mq.removeEventListener("change", mqHandler);
+    };
   }, []);
   return dark;
 }

package/dist/index.mjs

@@ -19,11 +19,11 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
 // src/components/ConfirmDialogProvider.tsx
-import { useState as useState2, useCallback, useRef as useRef2, useMemo, useEffect as useEffect2 } from "react";
+import { useState, useCallback, useRef as useRef2, useMemo, useEffect as useEffect2 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/BuildinDialog.tsx
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var VARIANT_STYLES = {
   default: {
@@ -373,15 +373,42 @@ var DEFAULT_STATE = {
   variant: "default",
   icon: void 0
 };
+function detectDarkFromDOM() {
+  var _a;
+  if (typeof document === "undefined") return null;
+  const el = document.documentElement;
+  if (el.classList.contains("dark")) return true;
+  if (el.classList.contains("light")) return false;
+  const dataTheme = (_a = el.getAttribute("data-theme")) != null ? _a : el.getAttribute("data-mode");
+  if (dataTheme === "dark") return true;
+  if (dataTheme === "light") return false;
+  return null;
+}
 function usePrefersDark() {
-  const [dark, setDark] = useState2(
-    () => typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)").matches : false
-  );
+  const [dark, setDark] = useState(() => {
+    if (typeof window === "undefined") return false;
+    const domDark = detectDarkFromDOM();
+    if (domDark !== null) return domDark;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  });
   useEffect2(() => {
+    const observer = new MutationObserver(() => {
+      const domDark = detectDarkFromDOM();
+      if (domDark !== null) setDark(domDark);
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme", "data-mode"]
+    });
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
-    const handler = (e) => setDark(e.matches);
-    mq.addEventListener("change", handler);
-    return () => mq.removeEventListener("change", handler);
+    const mqHandler = (e) => {
+      if (detectDarkFromDOM() === null) setDark(e.matches);
+    };
+    mq.addEventListener("change", mqHandler);
+    return () => {
+      observer.disconnect();
+      mq.removeEventListener("change", mqHandler);
+    };
   }, []);
   return dark;
 }
@@ -392,8 +419,8 @@ function ConfirmDialogProvider({
   styles,
   renderDialog
 }) {
-  const [state, setState] = useState2(DEFAULT_STATE);
-  const [isClosing, setIsClosing] = useState2(false);
+  const [state, setState] = useState(DEFAULT_STATE);
+  const [isClosing, setIsClosing] = useState(false);
   const resolveRef = useRef2(null);
   const isDark = usePrefersDark();
   const close = useCallback((result) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nobertdev/react-confirm-dialog",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "A lightweight, fully customizable confirmation dialog hook (useConfirm()) that replaces window.confirm() with beautiful async modals. Zero dependencies.",
   "keywords": [
     "react",