Skip to main content
Customize the visual appearance of the Para Modal to match your application’s design system.

​
Logo Configuration

paraModalConfig={{
  logo: "https://yourdomain.com/logo.png"
}}
For optimal display, use a logo image with dimensions of 372px × 160px.

​
Theme Configuration

​
Basic Theme Example

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

​
Dark Mode Configuration

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

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

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

​
Advanced Theme with Custom Palette

For granular control over specific UI components, use the customPalette option: 
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"
        }
      }
    }
  }
}}

​
Custom Fonts

You can use custom fonts by importing them in your global CSS and specifying the font family: 
paraModalConfig={{
  theme: {
    font: "Inter, sans-serif"
  }
}}
Ensure your custom font is loaded before the modal renders for the best user experience.

​
Password & PIN Screen Theme Limitations

Password and PIN authentication screens are rendered in an iframe and use the Developer Portal theme settings, not your paraModalConfig.theme. This means:
  • Theme colors may differ between the modal and password screens if configurations don’t match
  • Dynamic theme changes at runtime won’t affect the iframe
  • You must configure matching themes in both your code and the Developer Portal for consistency

​
Complete Theming Example

<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>
Test your theme configuration with our interactive tool:

Modal Designer