Style the Modal

paraModalConfig={{
  logo: "https://yourdomain.com/logo.png"
}}

paraModalConfig={{
  theme: {
    foregroundColor: "#333333",
    backgroundColor: "#FFFFFF",
    accentColor: "#007AFF",
    mode: "light",
    borderRadius: "md",
    font: "Arial, sans-serif"
  }
}}

paraModalConfig={{
  theme: {
    // Light mode colors
    foregroundColor: "#333333",
    backgroundColor: "#FFFFFF",
    accentColor: "#007AFF",

    // Dark mode colors
    darkForegroundColor: "#FFFFFF",
    darkBackgroundColor: "#1C1C1E",
    darkAccentColor: "#0A84FF",

    mode: "dark" // or "light"
  }
}}

paraModalConfig={{
  theme: {
    foregroundColor: "#333333",
    backgroundColor: "#FFFFFF",
    accentColor: "#007AFF",
    mode: "light",
    customPalette: {
      text: {
        primary: "#333333",
        secondary: "#666666",
        subtle: "#999999",
        inverted: "#FFFFFF",
        error: "#FF3B30"
      },
      modal: {
        surface: {
          main: "#FFFFFF",
          footer: "#F2F2F7"
        },
        border: "#E5E5EA"
      },
      button: {
        primary: {
          background: "#007AFF",
          hover: "#0056CC",
          text: "#FFFFFF"
        }
      }
    }
  }
}}

paraModalConfig={{
  theme: {
    font: "Inter, sans-serif"
  }
}}

<ParaProvider
  paraClientConfig={{
    apiKey: process.env.REACT_APP_PARA_API_KEY || "",
  }}
  config={{
    appName: "Your App Name"
  }}
  paraModalConfig={{
    logo: "https://yourdomain.com/logo.png",
    theme: {
      foregroundColor: "#333333",
      backgroundColor: "#FFFFFF",
      accentColor: "#007AFF",
      mode: "light",
      borderRadius: "md",
      font: "Inter, sans-serif",
      oAuthLogoVariant: "default",
      customPalette: {
        text: {
          primary: "#333333",
          secondary: "#666666"
        },
        button: {
          primary: {
            background: "#007AFF",
            hover: "#0056CC"
          }
        }
      }
    }
  }}
>
  {children}
</ParaProvider>