@nocios/crudify-ui 4.0.0 → 4.0.2

package/dist/index.d.mts

@@ -3,6 +3,7 @@ export * from '@nocios/crudify-browser';
 export { default as crudify } from '@nocios/crudify-browser';
 import React, { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Theme } from '@mui/material/styles';
 
 type BoxScreenType = "login" | "signUp" | "forgotPassword" | "resetPassword" | "checkCode";
 interface CrudifyLoginConfig {
@@ -812,4 +813,78 @@ declare const useCrudifyWithNotifications: (options?: CrudifyWithNotificationsOp
     shouldShowNotification: (response: CrudifyResponse) => boolean;
 };
 
-export { type ApiError, type BoxScreenType, type CrudifyApiResponse, CrudifyLogin, type CrudifyLoginConfig, type CrudifyLoginProps, type CrudifyLoginTranslations, type CrudifyTransactionResponse, ERROR_CODES, ERROR_SEVERITY_MAP, type ErrorCode, type ErrorSeverity, type ErrorTranslationConfig, type ForgotPasswordRequest, GlobalNotificationProvider, type GlobalNotificationProviderProps, type JwtPayload, LoginComponent, type LoginRequest, type LoginResponse, type LoginResult, type Notification, type NotificationOptions, type NotificationSeverity, POLICY_ACTIONS, PREFERRED_POLICY_ORDER, type ParsedError, Policies, type PolicyAction, ProtectedRoute, type ProtectedRouteProps, type ResetPasswordRequest, type SessionConfig, SessionDebugInfo, SessionManager, SessionProvider, type SessionProviderProps, type SessionState, SessionStatus, type StorageType, type TokenData, TokenStorage, type TransactionResponseData, type UseAuthReturn, type UseDataReturn, type UseSessionOptions, type UseUserDataOptions, type UseUserDataReturn, type UserData, type UserLoginData, type UserProfile, UserProfileDisplay, type ValidateCodeRequest, type ValidationError, createErrorTranslator, decodeJwtSafely, getCookie, getCurrentUserEmail, getErrorMessage, handleCrudifyError, isTokenExpired, parseApiError, parseJavaScriptError, parseTransactionError, secureLocalStorage, secureSessionStorage, translateError, translateErrorCode, translateErrorCodes, useAuth, useCrudifyWithNotifications, useData, useGlobalNotification, useSession, useSessionContext, useUserData, useUserProfile };
+interface CrudifyThemeColors {
+    primary: {
+        main: string;
+        light: string;
+        dark: string;
+        contrastText: string;
+    };
+    secondary: {
+        main: string;
+        light: string;
+        dark: string;
+        contrastText: string;
+    };
+    background: {
+        default: string;
+        paper: string;
+        light: string;
+    };
+    button: {
+        primary: {
+            background: string;
+            backgroundHover: string;
+            border: string;
+            borderHover: string;
+            text: string;
+            textHover: string;
+        };
+        secondary: {
+            background: string;
+            backgroundHover: string;
+            border: string;
+            borderHover: string;
+            text: string;
+            textHover: string;
+        };
+    };
+    input: {
+        background: string;
+        border: string;
+        borderFocus: string;
+        text: string;
+        placeholder: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        disabled: string;
+    };
+    divider: string;
+    error: {
+        main: string;
+        light: string;
+        dark: string;
+    };
+    warning: {
+        main: string;
+        light: string;
+        dark: string;
+    };
+    success: {
+        main: string;
+        light: string;
+        dark: string;
+    };
+    info: {
+        main: string;
+        light: string;
+        dark: string;
+    };
+}
+declare const defaultCrudifyColors: CrudifyThemeColors;
+declare const createCrudifyTheme: (colors?: Partial<CrudifyThemeColors>) => Theme;
+declare const getCrudifyThemeFromCookies: () => Theme;
+
+export { type ApiError, type BoxScreenType, type CrudifyApiResponse, CrudifyLogin, type CrudifyLoginConfig, type CrudifyLoginProps, type CrudifyLoginTranslations, type CrudifyThemeColors, type CrudifyTransactionResponse, ERROR_CODES, ERROR_SEVERITY_MAP, type ErrorCode, type ErrorSeverity, type ErrorTranslationConfig, type ForgotPasswordRequest, GlobalNotificationProvider, type GlobalNotificationProviderProps, type JwtPayload, LoginComponent, type LoginRequest, type LoginResponse, type LoginResult, type Notification, type NotificationOptions, type NotificationSeverity, POLICY_ACTIONS, PREFERRED_POLICY_ORDER, type ParsedError, Policies, type PolicyAction, ProtectedRoute, type ProtectedRouteProps, type ResetPasswordRequest, type SessionConfig, SessionDebugInfo, SessionManager, SessionProvider, type SessionProviderProps, type SessionState, SessionStatus, type StorageType, type TokenData, TokenStorage, type TransactionResponseData, type UseAuthReturn, type UseDataReturn, type UseSessionOptions, type UseUserDataOptions, type UseUserDataReturn, type UserData, type UserLoginData, type UserProfile, UserProfileDisplay, type ValidateCodeRequest, type ValidationError, createCrudifyTheme, createErrorTranslator, decodeJwtSafely, defaultCrudifyColors, getCookie, getCrudifyThemeFromCookies, getCurrentUserEmail, getErrorMessage, handleCrudifyError, isTokenExpired, parseApiError, parseJavaScriptError, parseTransactionError, secureLocalStorage, secureSessionStorage, translateError, translateErrorCode, translateErrorCodes, useAuth, useCrudifyWithNotifications, useData, useGlobalNotification, useSession, useSessionContext, useUserData, useUserProfile };

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from '@nocios/crudify-browser';
 export { default as crudify } from '@nocios/crudify-browser';
 import React, { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Theme } from '@mui/material/styles';
 
 type BoxScreenType = "login" | "signUp" | "forgotPassword" | "resetPassword" | "checkCode";
 interface CrudifyLoginConfig {
@@ -812,4 +813,78 @@ declare const useCrudifyWithNotifications: (options?: CrudifyWithNotificationsOp
     shouldShowNotification: (response: CrudifyResponse) => boolean;
 };
 
-export { type ApiError, type BoxScreenType, type CrudifyApiResponse, CrudifyLogin, type CrudifyLoginConfig, type CrudifyLoginProps, type CrudifyLoginTranslations, type CrudifyTransactionResponse, ERROR_CODES, ERROR_SEVERITY_MAP, type ErrorCode, type ErrorSeverity, type ErrorTranslationConfig, type ForgotPasswordRequest, GlobalNotificationProvider, type GlobalNotificationProviderProps, type JwtPayload, LoginComponent, type LoginRequest, type LoginResponse, type LoginResult, type Notification, type NotificationOptions, type NotificationSeverity, POLICY_ACTIONS, PREFERRED_POLICY_ORDER, type ParsedError, Policies, type PolicyAction, ProtectedRoute, type ProtectedRouteProps, type ResetPasswordRequest, type SessionConfig, SessionDebugInfo, SessionManager, SessionProvider, type SessionProviderProps, type SessionState, SessionStatus, type StorageType, type TokenData, TokenStorage, type TransactionResponseData, type UseAuthReturn, type UseDataReturn, type UseSessionOptions, type UseUserDataOptions, type UseUserDataReturn, type UserData, type UserLoginData, type UserProfile, UserProfileDisplay, type ValidateCodeRequest, type ValidationError, createErrorTranslator, decodeJwtSafely, getCookie, getCurrentUserEmail, getErrorMessage, handleCrudifyError, isTokenExpired, parseApiError, parseJavaScriptError, parseTransactionError, secureLocalStorage, secureSessionStorage, translateError, translateErrorCode, translateErrorCodes, useAuth, useCrudifyWithNotifications, useData, useGlobalNotification, useSession, useSessionContext, useUserData, useUserProfile };
+interface CrudifyThemeColors {
+    primary: {
+        main: string;
+        light: string;
+        dark: string;
+        contrastText: string;
+    };
+    secondary: {
+        main: string;
+        light: string;
+        dark: string;
+        contrastText: string;
+    };
+    background: {
+        default: string;
+        paper: string;
+        light: string;
+    };
+    button: {
+        primary: {
+            background: string;
+            backgroundHover: string;
+            border: string;
+            borderHover: string;
+            text: string;
+            textHover: string;
+        };
+        secondary: {
+            background: string;
+            backgroundHover: string;
+            border: string;
+            borderHover: string;
+            text: string;
+            textHover: string;
+        };
+    };
+    input: {
+        background: string;
+        border: string;
+        borderFocus: string;
+        text: string;
+        placeholder: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        disabled: string;
+    };
+    divider: string;
+    error: {
+        main: string;
+        light: string;
+        dark: string;
+    };
+    warning: {
+        main: string;
+        light: string;
+        dark: string;
+    };
+    success: {
+        main: string;
+        light: string;
+        dark: string;
+    };
+    info: {
+        main: string;
+        light: string;
+        dark: string;
+    };
+}
+declare const defaultCrudifyColors: CrudifyThemeColors;
+declare const createCrudifyTheme: (colors?: Partial<CrudifyThemeColors>) => Theme;
+declare const getCrudifyThemeFromCookies: () => Theme;
+
+export { type ApiError, type BoxScreenType, type CrudifyApiResponse, CrudifyLogin, type CrudifyLoginConfig, type CrudifyLoginProps, type CrudifyLoginTranslations, type CrudifyThemeColors, type CrudifyTransactionResponse, ERROR_CODES, ERROR_SEVERITY_MAP, type ErrorCode, type ErrorSeverity, type ErrorTranslationConfig, type ForgotPasswordRequest, GlobalNotificationProvider, type GlobalNotificationProviderProps, type JwtPayload, LoginComponent, type LoginRequest, type LoginResponse, type LoginResult, type Notification, type NotificationOptions, type NotificationSeverity, POLICY_ACTIONS, PREFERRED_POLICY_ORDER, type ParsedError, Policies, type PolicyAction, ProtectedRoute, type ProtectedRouteProps, type ResetPasswordRequest, type SessionConfig, SessionDebugInfo, SessionManager, SessionProvider, type SessionProviderProps, type SessionState, SessionStatus, type StorageType, type TokenData, TokenStorage, type TransactionResponseData, type UseAuthReturn, type UseDataReturn, type UseSessionOptions, type UseUserDataOptions, type UseUserDataReturn, type UserData, type UserLoginData, type UserProfile, UserProfileDisplay, type ValidateCodeRequest, type ValidationError, createCrudifyTheme, createErrorTranslator, decodeJwtSafely, defaultCrudifyColors, getCookie, getCrudifyThemeFromCookies, getCurrentUserEmail, getErrorMessage, handleCrudifyError, isTokenExpired, parseApiError, parseJavaScriptError, parseTransactionError, secureLocalStorage, secureSessionStorage, translateError, translateErrorCode, translateErrorCodes, useAuth, useCrudifyWithNotifications, useData, useGlobalNotification, useSession, useSessionContext, useUserData, useUserProfile };

package/dist/index.js

@@ -46,10 +46,13 @@ __export(index_exports, {
   SessionStatus: () => SessionStatus,
   TokenStorage: () => TokenStorage,
   UserProfileDisplay: () => UserProfileDisplay_default,
+  createCrudifyTheme: () => createCrudifyTheme,
   createErrorTranslator: () => createErrorTranslator,
   crudify: () => import_crudify_browser7.default,
   decodeJwtSafely: () => decodeJwtSafely,
+  defaultCrudifyColors: () => defaultCrudifyColors,
   getCookie: () => getCookie,
+  getCrudifyThemeFromCookies: () => getCrudifyThemeFromCookies,
   getCurrentUserEmail: () => getCurrentUserEmail,
   getErrorMessage: () => getErrorMessage,
   handleCrudifyError: () => handleCrudifyError,
@@ -1675,6 +1678,8 @@ function InnerSessionProvider({
       const cookieEnv = getCookie("environment");
       const cookieAppName = getCookie("appName");
       const cookieLoginActions = getCookie("loginActions");
+      const cookieLogo = getCookie("logo");
+      const cookieColors = getCookie("colors");
       if (cookieApiKey) {
         publicApiKey = cookieApiKey;
         configSource = "cookies";
@@ -1689,6 +1694,16 @@ function InnerSessionProvider({
         const decodedActions = decodeURIComponent(cookieLoginActions);
         loginActions = decodedActions.split(",").map((s) => s.trim()).filter(Boolean);
       }
+      if (cookieLogo) logo = decodeURIComponent(cookieLogo);
+      if (cookieColors) {
+        try {
+          const decodedColors = decodeURIComponent(cookieColors);
+          colors = JSON.parse(decodedColors);
+        } catch (error) {
+          console.error("Error parsing colors from cookie:", error);
+          colors = {};
+        }
+      }
     }
     return {
       publicApiKey,
@@ -2920,6 +2935,226 @@ var CrudifyInitializer = ({ children, fallback }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children });
 };
 
+// src/core/theme.ts
+var import_styles = require("@mui/material/styles");
+var defaultCrudifyColors = {
+  primary: {
+    main: "#c2d66c",
+    light: "#d4e289",
+    dark: "#a8c248",
+    contrastText: "#1a1a1a"
+  },
+  secondary: {
+    main: "#6cc2d6",
+    light: "#89d4e2",
+    dark: "#48a8c2",
+    contrastText: "#ffffff"
+  },
+  background: {
+    default: "#f8faf4",
+    paper: "#ffffff",
+    light: "#e8f0d8"
+  },
+  button: {
+    primary: {
+      background: "#c2d66c",
+      backgroundHover: "#a8c248",
+      border: "#a8c248",
+      borderHover: "#8fb03d",
+      text: "#1a1a1a",
+      textHover: "#1a1a1a"
+    },
+    secondary: {
+      background: "transparent",
+      backgroundHover: "#f8faf4",
+      border: "#c2d66c",
+      borderHover: "#a8c248",
+      text: "#c2d66c",
+      textHover: "#a8c248"
+    }
+  },
+  input: {
+    background: "#ffffff",
+    border: "#d1d5db",
+    borderFocus: "#c2d66c",
+    text: "#1a1a1a",
+    placeholder: "#6b7280"
+  },
+  text: {
+    primary: "#1a1a1a",
+    secondary: "#4b5563",
+    disabled: "#9ca3af"
+  },
+  divider: "#e5e7eb",
+  error: {
+    main: "#ef4444",
+    light: "#f87171",
+    dark: "#dc2626"
+  },
+  warning: {
+    main: "#f59e0b",
+    light: "#fbbf24",
+    dark: "#d97706"
+  },
+  success: {
+    main: "#10b981",
+    light: "#34d399",
+    dark: "#059669"
+  },
+  info: {
+    main: "#3b82f6",
+    light: "#60a5fa",
+    dark: "#2563eb"
+  }
+};
+var createCrudifyTheme = (colors = {}) => {
+  const themeColors = { ...defaultCrudifyColors, ...colors };
+  return (0, import_styles.createTheme)({
+    palette: {
+      primary: {
+        main: themeColors.primary.main,
+        light: themeColors.primary.light,
+        dark: themeColors.primary.dark,
+        contrastText: themeColors.primary.contrastText
+      },
+      secondary: {
+        main: themeColors.secondary.main,
+        light: themeColors.secondary.light,
+        dark: themeColors.secondary.dark,
+        contrastText: themeColors.secondary.contrastText
+      },
+      background: {
+        default: themeColors.background.default,
+        paper: themeColors.background.paper
+      },
+      text: {
+        primary: themeColors.text.primary,
+        secondary: themeColors.text.secondary,
+        disabled: themeColors.text.disabled
+      },
+      divider: themeColors.divider,
+      error: {
+        main: themeColors.error.main,
+        light: themeColors.error.light,
+        dark: themeColors.error.dark
+      },
+      warning: {
+        main: themeColors.warning.main,
+        light: themeColors.warning.light,
+        dark: themeColors.warning.dark
+      },
+      success: {
+        main: themeColors.success.main,
+        light: themeColors.success.light,
+        dark: themeColors.success.dark
+      },
+      info: {
+        main: themeColors.info.main,
+        light: themeColors.info.light,
+        dark: themeColors.info.dark
+      }
+    },
+    components: {
+      MuiButton: {
+        styleOverrides: {
+          contained: {
+            backgroundColor: themeColors.button.primary.background,
+            color: themeColors.button.primary.text,
+            border: `1px solid ${themeColors.button.primary.border}`,
+            "&:hover": {
+              backgroundColor: themeColors.button.primary.backgroundHover,
+              borderColor: themeColors.button.primary.borderHover,
+              color: themeColors.button.primary.textHover
+            }
+          },
+          outlined: {
+            backgroundColor: themeColors.button.secondary.background,
+            color: themeColors.button.secondary.text,
+            border: `1px solid ${themeColors.button.secondary.border}`,
+            "&:hover": {
+              backgroundColor: themeColors.button.secondary.backgroundHover,
+              borderColor: themeColors.button.secondary.borderHover,
+              color: themeColors.button.secondary.textHover
+            }
+          }
+        }
+      },
+      MuiTextField: {
+        styleOverrides: {
+          root: {
+            "& .MuiOutlinedInput-root": {
+              backgroundColor: themeColors.input.background,
+              "& fieldset": {
+                borderColor: themeColors.input.border
+              },
+              "&:hover fieldset": {
+                borderColor: themeColors.input.borderFocus
+              },
+              "&.Mui-focused fieldset": {
+                borderColor: themeColors.input.borderFocus
+              },
+              "& input": {
+                color: themeColors.input.text
+              },
+              "& input::placeholder": {
+                color: themeColors.input.placeholder,
+                opacity: 1
+              }
+            }
+          }
+        }
+      },
+      MuiInputBase: {
+        styleOverrides: {
+          input: {
+            "&::placeholder": {
+              color: themeColors.input.placeholder,
+              opacity: 1
+            }
+          }
+        }
+      },
+      MuiTypography: {
+        styleOverrides: {
+          h6: {
+            color: themeColors.text.primary
+          }
+        }
+      }
+    },
+    typography: {
+      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif'
+    }
+  });
+};
+var getCrudifyThemeFromCookies = () => {
+  let themeColors = {};
+  if (typeof document !== "undefined") {
+    try {
+      const colorsCookie = document.cookie.split("; ").find((row) => row.startsWith("colors="));
+      if (colorsCookie) {
+        const decodedColors = decodeURIComponent(colorsCookie.split("=")[1]);
+        const parsedColors = JSON.parse(decodedColors);
+        if (parsedColors.primaryColor) {
+          themeColors.primary = {
+            ...defaultCrudifyColors.primary,
+            main: parsedColors.primaryColor
+          };
+        }
+        if (parsedColors.bgColor) {
+          themeColors.background = {
+            ...defaultCrudifyColors.background,
+            default: parsedColors.bgColor
+          };
+        }
+      }
+    } catch (error) {
+      console.error("Error parsing colors from cookie:", error);
+    }
+  }
+  return createCrudifyTheme(themeColors);
+};
+
 // src/components/CrudifyLogin/index.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var CrudifyLoginInternal = ({
@@ -2996,8 +3231,7 @@ var CrudifyLoginInternal = ({
         component: "h1",
         sx: {
           textAlign: "center",
-          mb: 2,
-          color: config.colors?.primaryColor || "#1066BA"
+          mb: 2
         },
         children: config.appName
       }
@@ -3014,7 +3248,8 @@ var CrudifyLogin = ({
   ...props
 }) => {
   const { config } = useSessionContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(I18nProvider, { translations, translationsUrl, language, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CrudifyProvider, { config, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(LoginStateProvider, { config, initialScreen, autoReadFromCookies, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CrudifyLoginInternal, { ...props }) }) }) });
+  const theme = getCrudifyThemeFromCookies();
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material7.ThemeProvider, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(I18nProvider, { translations, translationsUrl, language, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CrudifyProvider, { config, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(LoginStateProvider, { config, initialScreen, autoReadFromCookies, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CrudifyLoginInternal, { ...props }) }) }) }) });
 };
 var CrudifyLogin_default = CrudifyLogin;
 
@@ -4907,10 +5142,13 @@ var useCrudifyWithNotifications = (options = {}) => {
   SessionStatus,
   TokenStorage,
   UserProfileDisplay,
+  createCrudifyTheme,
   createErrorTranslator,
   crudify,
   decodeJwtSafely,
+  defaultCrudifyColors,
   getCookie,
+  getCrudifyThemeFromCookies,
   getCurrentUserEmail,
   getErrorMessage,
   handleCrudifyError,

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { default as default2 } from "@nocios/crudify-browser";
 export * from "@nocios/crudify-browser";
 
 // src/components/CrudifyLogin/index.tsx
-import { Box as Box7, Typography as Typography6 } from "@mui/material";
+import { Box as Box7, Typography as Typography6, ThemeProvider } from "@mui/material";
 
 // src/components/CrudifyLogin/context/I18nProvider.tsx
 import { createContext, useContext, useMemo } from "react";
@@ -1602,6 +1602,8 @@ function InnerSessionProvider({
       const cookieEnv = getCookie("environment");
       const cookieAppName = getCookie("appName");
       const cookieLoginActions = getCookie("loginActions");
+      const cookieLogo = getCookie("logo");
+      const cookieColors = getCookie("colors");
       if (cookieApiKey) {
         publicApiKey = cookieApiKey;
         configSource = "cookies";
@@ -1616,6 +1618,16 @@ function InnerSessionProvider({
         const decodedActions = decodeURIComponent(cookieLoginActions);
         loginActions = decodedActions.split(",").map((s) => s.trim()).filter(Boolean);
       }
+      if (cookieLogo) logo = decodeURIComponent(cookieLogo);
+      if (cookieColors) {
+        try {
+          const decodedColors = decodeURIComponent(cookieColors);
+          colors = JSON.parse(decodedColors);
+        } catch (error) {
+          console.error("Error parsing colors from cookie:", error);
+          colors = {};
+        }
+      }
     }
     return {
       publicApiKey,
@@ -2847,6 +2859,226 @@ var CrudifyInitializer = ({ children, fallback }) => {
   return /* @__PURE__ */ jsx10(Fragment6, { children });
 };
 
+// src/core/theme.ts
+import { createTheme } from "@mui/material/styles";
+var defaultCrudifyColors = {
+  primary: {
+    main: "#c2d66c",
+    light: "#d4e289",
+    dark: "#a8c248",
+    contrastText: "#1a1a1a"
+  },
+  secondary: {
+    main: "#6cc2d6",
+    light: "#89d4e2",
+    dark: "#48a8c2",
+    contrastText: "#ffffff"
+  },
+  background: {
+    default: "#f8faf4",
+    paper: "#ffffff",
+    light: "#e8f0d8"
+  },
+  button: {
+    primary: {
+      background: "#c2d66c",
+      backgroundHover: "#a8c248",
+      border: "#a8c248",
+      borderHover: "#8fb03d",
+      text: "#1a1a1a",
+      textHover: "#1a1a1a"
+    },
+    secondary: {
+      background: "transparent",
+      backgroundHover: "#f8faf4",
+      border: "#c2d66c",
+      borderHover: "#a8c248",
+      text: "#c2d66c",
+      textHover: "#a8c248"
+    }
+  },
+  input: {
+    background: "#ffffff",
+    border: "#d1d5db",
+    borderFocus: "#c2d66c",
+    text: "#1a1a1a",
+    placeholder: "#6b7280"
+  },
+  text: {
+    primary: "#1a1a1a",
+    secondary: "#4b5563",
+    disabled: "#9ca3af"
+  },
+  divider: "#e5e7eb",
+  error: {
+    main: "#ef4444",
+    light: "#f87171",
+    dark: "#dc2626"
+  },
+  warning: {
+    main: "#f59e0b",
+    light: "#fbbf24",
+    dark: "#d97706"
+  },
+  success: {
+    main: "#10b981",
+    light: "#34d399",
+    dark: "#059669"
+  },
+  info: {
+    main: "#3b82f6",
+    light: "#60a5fa",
+    dark: "#2563eb"
+  }
+};
+var createCrudifyTheme = (colors = {}) => {
+  const themeColors = { ...defaultCrudifyColors, ...colors };
+  return createTheme({
+    palette: {
+      primary: {
+        main: themeColors.primary.main,
+        light: themeColors.primary.light,
+        dark: themeColors.primary.dark,
+        contrastText: themeColors.primary.contrastText
+      },
+      secondary: {
+        main: themeColors.secondary.main,
+        light: themeColors.secondary.light,
+        dark: themeColors.secondary.dark,
+        contrastText: themeColors.secondary.contrastText
+      },
+      background: {
+        default: themeColors.background.default,
+        paper: themeColors.background.paper
+      },
+      text: {
+        primary: themeColors.text.primary,
+        secondary: themeColors.text.secondary,
+        disabled: themeColors.text.disabled
+      },
+      divider: themeColors.divider,
+      error: {
+        main: themeColors.error.main,
+        light: themeColors.error.light,
+        dark: themeColors.error.dark
+      },
+      warning: {
+        main: themeColors.warning.main,
+        light: themeColors.warning.light,
+        dark: themeColors.warning.dark
+      },
+      success: {
+        main: themeColors.success.main,
+        light: themeColors.success.light,
+        dark: themeColors.success.dark
+      },
+      info: {
+        main: themeColors.info.main,
+        light: themeColors.info.light,
+        dark: themeColors.info.dark
+      }
+    },
+    components: {
+      MuiButton: {
+        styleOverrides: {
+          contained: {
+            backgroundColor: themeColors.button.primary.background,
+            color: themeColors.button.primary.text,
+            border: `1px solid ${themeColors.button.primary.border}`,
+            "&:hover": {
+              backgroundColor: themeColors.button.primary.backgroundHover,
+              borderColor: themeColors.button.primary.borderHover,
+              color: themeColors.button.primary.textHover
+            }
+          },
+          outlined: {
+            backgroundColor: themeColors.button.secondary.background,
+            color: themeColors.button.secondary.text,
+            border: `1px solid ${themeColors.button.secondary.border}`,
+            "&:hover": {
+              backgroundColor: themeColors.button.secondary.backgroundHover,
+              borderColor: themeColors.button.secondary.borderHover,
+              color: themeColors.button.secondary.textHover
+            }
+          }
+        }
+      },
+      MuiTextField: {
+        styleOverrides: {
+          root: {
+            "& .MuiOutlinedInput-root": {
+              backgroundColor: themeColors.input.background,
+              "& fieldset": {
+                borderColor: themeColors.input.border
+              },
+              "&:hover fieldset": {
+                borderColor: themeColors.input.borderFocus
+              },
+              "&.Mui-focused fieldset": {
+                borderColor: themeColors.input.borderFocus
+              },
+              "& input": {
+                color: themeColors.input.text
+              },
+              "& input::placeholder": {
+                color: themeColors.input.placeholder,
+                opacity: 1
+              }
+            }
+          }
+        }
+      },
+      MuiInputBase: {
+        styleOverrides: {
+          input: {
+            "&::placeholder": {
+              color: themeColors.input.placeholder,
+              opacity: 1
+            }
+          }
+        }
+      },
+      MuiTypography: {
+        styleOverrides: {
+          h6: {
+            color: themeColors.text.primary
+          }
+        }
+      }
+    },
+    typography: {
+      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif'
+    }
+  });
+};
+var getCrudifyThemeFromCookies = () => {
+  let themeColors = {};
+  if (typeof document !== "undefined") {
+    try {
+      const colorsCookie = document.cookie.split("; ").find((row) => row.startsWith("colors="));
+      if (colorsCookie) {
+        const decodedColors = decodeURIComponent(colorsCookie.split("=")[1]);
+        const parsedColors = JSON.parse(decodedColors);
+        if (parsedColors.primaryColor) {
+          themeColors.primary = {
+            ...defaultCrudifyColors.primary,
+            main: parsedColors.primaryColor
+          };
+        }
+        if (parsedColors.bgColor) {
+          themeColors.background = {
+            ...defaultCrudifyColors.background,
+            default: parsedColors.bgColor
+          };
+        }
+      }
+    } catch (error) {
+      console.error("Error parsing colors from cookie:", error);
+    }
+  }
+  return createCrudifyTheme(themeColors);
+};
+
 // src/components/CrudifyLogin/index.tsx
 import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var CrudifyLoginInternal = ({
@@ -2923,8 +3155,7 @@ var CrudifyLoginInternal = ({
         component: "h1",
         sx: {
           textAlign: "center",
-          mb: 2,
-          color: config.colors?.primaryColor || "#1066BA"
+          mb: 2
         },
         children: config.appName
       }
@@ -2941,7 +3172,8 @@ var CrudifyLogin = ({
   ...props
 }) => {
   const { config } = useSessionContext();
-  return /* @__PURE__ */ jsx11(I18nProvider, { translations, translationsUrl, language, children: /* @__PURE__ */ jsx11(CrudifyProvider, { config, children: /* @__PURE__ */ jsx11(LoginStateProvider, { config, initialScreen, autoReadFromCookies, children: /* @__PURE__ */ jsx11(CrudifyLoginInternal, { ...props }) }) }) });
+  const theme = getCrudifyThemeFromCookies();
+  return /* @__PURE__ */ jsx11(ThemeProvider, { theme, children: /* @__PURE__ */ jsx11(I18nProvider, { translations, translationsUrl, language, children: /* @__PURE__ */ jsx11(CrudifyProvider, { config, children: /* @__PURE__ */ jsx11(LoginStateProvider, { config, initialScreen, autoReadFromCookies, children: /* @__PURE__ */ jsx11(CrudifyLoginInternal, { ...props }) }) }) }) });
 };
 var CrudifyLogin_default = CrudifyLogin;
 
@@ -4892,10 +5124,13 @@ export {
   SessionStatus,
   TokenStorage,
   UserProfileDisplay_default as UserProfileDisplay,
+  createCrudifyTheme,
   createErrorTranslator,
   default2 as crudify,
   decodeJwtSafely,
+  defaultCrudifyColors,
   getCookie,
+  getCrudifyThemeFromCookies,
   getCurrentUserEmail,
   getErrorMessage,
   handleCrudifyError,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocios/crudify-ui",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "description": "Biblioteca de componentes UI para Crudify",
   "author": "Nocios",
   "license": "MIT",