@nobertdev/react-confirm-dialog 1.0.0 → 1.1.1

package/README.md

@@ -2,7 +2,9 @@
 
 A lightweight, fully customizable confirmation dialog hook — `useConfirm()` — that replaces `window.confirm()` with beautiful async modals.
 
-**Zero runtime dependencies. ~2KB gzipped. Full TypeScript support.**
+**Zero runtime dependencies. ~2KB gzipped. Full TypeScript support. Auto dark mode.**
+
+📺 **[Live Demo](https://react-confirm-dialog.vercel.app/)** · 📖 **[Documentation](https://react-confirm-dialog.vercel.app/docs)** · 💻 **[GitHub](https://github.com/NOBERT167/react-confirm-dialog)**
 
 ---
 
@@ -10,6 +12,7 @@ A lightweight, fully customizable confirmation dialog hook — `useConfirm()`
 
 - ✅ Drop-in async replacement for `window.confirm()`
 - 🎨 Four built-in variants: `default`, `danger`, `warning`, `success`
+- 🌗 Auto dark mode — adapts to `prefers-color-scheme` automatically
 - 🧩 Fully customizable via props, classNames, styles, or `renderDialog`
 - ⌨️ Keyboard accessible (Escape to cancel, auto-focus confirm)
 - 🖱️ Click outside to dismiss
@@ -201,6 +204,17 @@ await confirm({ title: "Publish post?", variant: "success" });
 
 ---
 
+## Dark Mode
+
+The built-in dialog **automatically adapts** to the user's system color scheme via `prefers-color-scheme: dark`. No configuration needed — it just works.
+
+- Light mode: White dialog, light icon backgrounds, subtle shadows
+- Dark mode: Dark gray dialog, muted icon backgrounds, deeper shadows
+
+If you use `renderDialog` or custom `styles`, you have full control over theming.
+
+---
+
 ## SSR / Next.js
 
 Works with SSR out of the box. The portal is only created on the client.

package/dist/index.js

@@ -55,28 +55,36 @@ var VARIANT_STYLES = {
     confirmColor: "#fff",
     confirmHover: "#333",
     accentColor: "#111",
-    iconBg: "#f4f4f4"
+    accentColorDark: "#e5e5e5",
+    iconBg: "#f4f4f4",
+    iconBgDark: "#2c2c2e"
   },
   danger: {
     confirmBg: "#dc2626",
     confirmColor: "#fff",
     confirmHover: "#b91c1c",
     accentColor: "#dc2626",
-    iconBg: "#fef2f2"
+    accentColorDark: "#f87171",
+    iconBg: "#fef2f2",
+    iconBgDark: "#3b1114"
   },
   warning: {
     confirmBg: "#d97706",
     confirmColor: "#fff",
     confirmHover: "#b45309",
     accentColor: "#d97706",
-    iconBg: "#fffbeb"
+    accentColorDark: "#fbbf24",
+    iconBg: "#fffbeb",
+    iconBgDark: "#3b2a0a"
   },
   success: {
     confirmBg: "#16a34a",
     confirmColor: "#fff",
     confirmHover: "#15803d",
     accentColor: "#16a34a",
-    iconBg: "#f0fdf4"
+    accentColorDark: "#4ade80",
+    iconBg: "#f0fdf4",
+    iconBgDark: "#0a2e1a"
   }
 };
 var DEFAULT_ICONS = {
@@ -175,7 +183,8 @@ function BuiltInDialog({
   providerProps,
   onConfirm,
   onCancel,
-  isClosing
+  isClosing,
+  isDark
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   const confirmRef = (0, import_react.useRef)(null);
@@ -202,7 +211,7 @@ function BuiltInDialog({
   const overlayStyle = __spreadValues({
     position: "fixed",
     inset: 0,
-    background: "rgba(0,0,0,0.45)",
+    background: isDark ? "rgba(0,0,0,0.6)" : "rgba(0,0,0,0.45)",
     backdropFilter: "blur(4px)",
     WebkitBackdropFilter: "blur(4px)",
     display: "flex",
@@ -213,12 +222,13 @@ function BuiltInDialog({
     animation: `rcd-overlay-${animationState} 200ms ease forwards`
   }, (_b = providerProps.styles) == null ? void 0 : _b.overlay);
   const dialogStyle = __spreadValues({
-    background: "#fff",
+    background: isDark ? "#1c1c1e" : "#fff",
     borderRadius: "16px",
     padding: "28px",
     maxWidth: "420px",
     width: "100%",
-    boxShadow: "0 24px 64px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08)",
+    boxShadow: isDark ? "0 24px 64px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3)" : "0 24px 64px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08)",
+    border: isDark ? "1px solid rgba(255,255,255,0.08)" : "none",
     position: "relative",
     animation: `rcd-dialog-${animationState} 220ms cubic-bezier(0.34,1.56,0.64,1) forwards`
   }, (_c = providerProps.styles) == null ? void 0 : _c.dialog);
@@ -226,8 +236,8 @@ function BuiltInDialog({
     width: 48,
     height: 48,
     borderRadius: "12px",
-    background: v.iconBg,
-    color: v.accentColor,
+    background: isDark ? v.iconBgDark : v.iconBg,
+    color: isDark ? v.accentColorDark : v.accentColor,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -238,7 +248,7 @@ function BuiltInDialog({
     margin: "0 0 6px 0",
     fontSize: "17px",
     fontWeight: 700,
-    color: "#0f0f0f",
+    color: isDark ? "#f5f5f5" : "#0f0f0f",
     lineHeight: 1.3,
     letterSpacing: "-0.02em",
     fontFamily: "inherit"
@@ -246,7 +256,7 @@ function BuiltInDialog({
   const messageStyle = __spreadValues({
     margin: "0 0 24px 0",
     fontSize: "14px",
-    color: "#6b7280",
+    color: isDark ? "#a1a1aa" : "#6b7280",
     lineHeight: 1.6,
     fontFamily: "inherit"
   }, (_e = providerProps.styles) == null ? void 0 : _e.message);
@@ -255,12 +265,13 @@ function BuiltInDialog({
     gap: "10px",
     justifyContent: "flex-end"
   }, (_f = providerProps.styles) == null ? void 0 : _f.actions);
+  const cancelBg = isDark ? "#2c2c2e" : "#fff";
   const cancelStyle = __spreadValues({
     padding: "9px 18px",
     borderRadius: "9px",
-    border: "1.5px solid #e5e7eb",
-    background: "#fff",
-    color: "#374151",
+    border: isDark ? "1.5px solid #3a3a3c" : "1.5px solid #e5e7eb",
+    background: cancelBg,
+    color: isDark ? "#e5e5e5" : "#374151",
     fontSize: "14px",
     fontWeight: 500,
     cursor: "pointer",
@@ -325,11 +336,11 @@ function BuiltInDialog({
                     className: (_p = providerProps.classNames) == null ? void 0 : _p.cancelButton,
                     onClick: onCancel,
                     onMouseEnter: (e) => {
-                      e.target.style.background = "#f9fafb";
+                      e.target.style.background = isDark ? "#3a3a3c" : "#f9fafb";
                     },
                     onMouseLeave: (e) => {
                       var _a2, _b2, _c2, _d2;
-                      e.target.style.background = (_d2 = (_c2 = (_b2 = (_a2 = providerProps.styles) == null ? void 0 : _a2.cancelButton) == null ? void 0 : _b2.background) == null ? void 0 : _c2.toString()) != null ? _d2 : "#fff";
+                      e.target.style.background = (_d2 = (_c2 = (_b2 = (_a2 = providerProps.styles) == null ? void 0 : _a2.cancelButton) == null ? void 0 : _b2.background) == null ? void 0 : _c2.toString()) != null ? _d2 : cancelBg;
                     },
                     children: (_q = state.cancelText) != null ? _q : "Cancel"
                   }
@@ -386,6 +397,18 @@ var DEFAULT_STATE = {
   variant: "default",
   icon: void 0
 };
+function usePrefersDark() {
+  const [dark, setDark] = (0, import_react3.useState)(
+    () => typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)").matches : false
+  );
+  (0, import_react3.useEffect)(() => {
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = (e) => setDark(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  return dark;
+}
 function ConfirmDialogProvider({
   children,
   defaultOptions,
@@ -396,6 +419,7 @@ function ConfirmDialogProvider({
   const [state, setState] = (0, import_react3.useState)(DEFAULT_STATE);
   const [isClosing, setIsClosing] = (0, import_react3.useState)(false);
   const resolveRef = (0, import_react3.useRef)(null);
+  const isDark = usePrefersDark();
   const close = (0, import_react3.useCallback)((result) => {
     setIsClosing(true);
     setTimeout(() => {
@@ -434,7 +458,8 @@ function ConfirmDialogProvider({
       providerProps: { classNames, styles, defaultOptions },
       onConfirm,
       onCancel,
-      isClosing
+      isClosing,
+      isDark
     }
   );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(ConfirmDialogContext.Provider, { value: contextValue, children: [

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, useCallback, useRef as useRef2, useMemo } from "react";
+import { useState as useState2, useCallback, useRef as useRef2, useMemo, useEffect as useEffect2 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/BuildinDialog.tsx
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var VARIANT_STYLES = {
   default: {
@@ -31,28 +31,36 @@ var VARIANT_STYLES = {
     confirmColor: "#fff",
     confirmHover: "#333",
     accentColor: "#111",
-    iconBg: "#f4f4f4"
+    accentColorDark: "#e5e5e5",
+    iconBg: "#f4f4f4",
+    iconBgDark: "#2c2c2e"
   },
   danger: {
     confirmBg: "#dc2626",
     confirmColor: "#fff",
     confirmHover: "#b91c1c",
     accentColor: "#dc2626",
-    iconBg: "#fef2f2"
+    accentColorDark: "#f87171",
+    iconBg: "#fef2f2",
+    iconBgDark: "#3b1114"
   },
   warning: {
     confirmBg: "#d97706",
     confirmColor: "#fff",
     confirmHover: "#b45309",
     accentColor: "#d97706",
-    iconBg: "#fffbeb"
+    accentColorDark: "#fbbf24",
+    iconBg: "#fffbeb",
+    iconBgDark: "#3b2a0a"
   },
   success: {
     confirmBg: "#16a34a",
     confirmColor: "#fff",
     confirmHover: "#15803d",
     accentColor: "#16a34a",
-    iconBg: "#f0fdf4"
+    accentColorDark: "#4ade80",
+    iconBg: "#f0fdf4",
+    iconBgDark: "#0a2e1a"
   }
 };
 var DEFAULT_ICONS = {
@@ -151,7 +159,8 @@ function BuiltInDialog({
   providerProps,
   onConfirm,
   onCancel,
-  isClosing
+  isClosing,
+  isDark
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   const confirmRef = useRef(null);
@@ -178,7 +187,7 @@ function BuiltInDialog({
   const overlayStyle = __spreadValues({
     position: "fixed",
     inset: 0,
-    background: "rgba(0,0,0,0.45)",
+    background: isDark ? "rgba(0,0,0,0.6)" : "rgba(0,0,0,0.45)",
     backdropFilter: "blur(4px)",
     WebkitBackdropFilter: "blur(4px)",
     display: "flex",
@@ -189,12 +198,13 @@ function BuiltInDialog({
     animation: `rcd-overlay-${animationState} 200ms ease forwards`
   }, (_b = providerProps.styles) == null ? void 0 : _b.overlay);
   const dialogStyle = __spreadValues({
-    background: "#fff",
+    background: isDark ? "#1c1c1e" : "#fff",
     borderRadius: "16px",
     padding: "28px",
     maxWidth: "420px",
     width: "100%",
-    boxShadow: "0 24px 64px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08)",
+    boxShadow: isDark ? "0 24px 64px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3)" : "0 24px 64px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08)",
+    border: isDark ? "1px solid rgba(255,255,255,0.08)" : "none",
     position: "relative",
     animation: `rcd-dialog-${animationState} 220ms cubic-bezier(0.34,1.56,0.64,1) forwards`
   }, (_c = providerProps.styles) == null ? void 0 : _c.dialog);
@@ -202,8 +212,8 @@ function BuiltInDialog({
     width: 48,
     height: 48,
     borderRadius: "12px",
-    background: v.iconBg,
-    color: v.accentColor,
+    background: isDark ? v.iconBgDark : v.iconBg,
+    color: isDark ? v.accentColorDark : v.accentColor,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -214,7 +224,7 @@ function BuiltInDialog({
     margin: "0 0 6px 0",
     fontSize: "17px",
     fontWeight: 700,
-    color: "#0f0f0f",
+    color: isDark ? "#f5f5f5" : "#0f0f0f",
     lineHeight: 1.3,
     letterSpacing: "-0.02em",
     fontFamily: "inherit"
@@ -222,7 +232,7 @@ function BuiltInDialog({
   const messageStyle = __spreadValues({
     margin: "0 0 24px 0",
     fontSize: "14px",
-    color: "#6b7280",
+    color: isDark ? "#a1a1aa" : "#6b7280",
     lineHeight: 1.6,
     fontFamily: "inherit"
   }, (_e = providerProps.styles) == null ? void 0 : _e.message);
@@ -231,12 +241,13 @@ function BuiltInDialog({
     gap: "10px",
     justifyContent: "flex-end"
   }, (_f = providerProps.styles) == null ? void 0 : _f.actions);
+  const cancelBg = isDark ? "#2c2c2e" : "#fff";
   const cancelStyle = __spreadValues({
     padding: "9px 18px",
     borderRadius: "9px",
-    border: "1.5px solid #e5e7eb",
-    background: "#fff",
-    color: "#374151",
+    border: isDark ? "1.5px solid #3a3a3c" : "1.5px solid #e5e7eb",
+    background: cancelBg,
+    color: isDark ? "#e5e5e5" : "#374151",
     fontSize: "14px",
     fontWeight: 500,
     cursor: "pointer",
@@ -301,11 +312,11 @@ function BuiltInDialog({
                     className: (_p = providerProps.classNames) == null ? void 0 : _p.cancelButton,
                     onClick: onCancel,
                     onMouseEnter: (e) => {
-                      e.target.style.background = "#f9fafb";
+                      e.target.style.background = isDark ? "#3a3a3c" : "#f9fafb";
                     },
                     onMouseLeave: (e) => {
                       var _a2, _b2, _c2, _d2;
-                      e.target.style.background = (_d2 = (_c2 = (_b2 = (_a2 = providerProps.styles) == null ? void 0 : _a2.cancelButton) == null ? void 0 : _b2.background) == null ? void 0 : _c2.toString()) != null ? _d2 : "#fff";
+                      e.target.style.background = (_d2 = (_c2 = (_b2 = (_a2 = providerProps.styles) == null ? void 0 : _a2.cancelButton) == null ? void 0 : _b2.background) == null ? void 0 : _c2.toString()) != null ? _d2 : cancelBg;
                     },
                     children: (_q = state.cancelText) != null ? _q : "Cancel"
                   }
@@ -362,6 +373,18 @@ var DEFAULT_STATE = {
   variant: "default",
   icon: void 0
 };
+function usePrefersDark() {
+  const [dark, setDark] = useState2(
+    () => typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)").matches : false
+  );
+  useEffect2(() => {
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = (e) => setDark(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  return dark;
+}
 function ConfirmDialogProvider({
   children,
   defaultOptions,
@@ -369,9 +392,10 @@ function ConfirmDialogProvider({
   styles,
   renderDialog
 }) {
-  const [state, setState] = useState(DEFAULT_STATE);
-  const [isClosing, setIsClosing] = useState(false);
+  const [state, setState] = useState2(DEFAULT_STATE);
+  const [isClosing, setIsClosing] = useState2(false);
   const resolveRef = useRef2(null);
+  const isDark = usePrefersDark();
   const close = useCallback((result) => {
     setIsClosing(true);
     setTimeout(() => {
@@ -410,7 +434,8 @@ function ConfirmDialogProvider({
       providerProps: { classNames, styles, defaultOptions },
       onConfirm,
       onCancel,
-      isClosing
+      isClosing,
+      isDark
     }
   );
   return /* @__PURE__ */ jsxs2(ConfirmDialogContext.Provider, { value: contextValue, children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nobertdev/react-confirm-dialog",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "A lightweight, fully customizable confirmation dialog hook (useConfirm()) that replaces window.confirm() with beautiful async modals. Zero dependencies.",
   "keywords": [
     "react",
@@ -39,10 +39,10 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/NOBERT167/@nobertdev/react-confirm-dialog.git"
+    "url": "https://github.com/NOBERT167/react-confirm-dialog.git"
   },
   "bugs": {
-    "url": "https://github.com/NOBERT167/@nobertdev/react-confirm-dialog/issues"
+    "url": "https://github.com/NOBERT167/react-confirm-dialog/issues"
   },
-  "homepage": "https://github.com/NOBERT167/@nobertdev/react-confirm-dialog#readme"
+  "homepage": "https://github.com/NOBERT167/react-confirm-dialog#readme"
 }