Skip to main content

IO Theme Customization

The LoginRadius IO Theme Customization feature allows businesses to personalize authentication pages to match their brand identity. You can either automate the process with AI-assisted branding or manually configure the design, ensuring complete control over your branding and user experience.

Configuration

This guide walks you through customizing your LoginRadius authentication pages using AI-assisted branding or manual adjustments.

Steps to Access Theme Customization:

  1. Log in to the LoginRadius Admin Console
  2. Navigate to Orchestration → Theme Customization
  3. Click on New Brand to start customizing your theme.

Available Customization Options

AI Branding

AI Branding streamlines theme creation by analyzing your website’s design and automatically generating a matching user interface. This ensures branding consistency while reducing manual work.

How to Use AI Branding:

  1. Enter your website URL
  2. Click Generate and wait for the AI to analyze and apply the theme
  3. Preview the generated design in the Preview Section

Please Note: AI Branding will overwrite any existing theme settings.

UI Customization

This section enables detailed manual customization of visual elements, including:

  1. Brand Name: Enter your name (required to save the theme).

  2. Logo:

    • Upload your brand's logo.
    • The system will suggest color palettes based on your logo.

    Note: If using the AI-assisted workflow, detected logos from your website will also appear here.

  3. Font Family: Select a font that aligns with your branding.

  4. Color Palette: Customize the overall color scheme to align with your brand

  5. Alignment Options: Set the alignment of your theme (e.g., center, left, or right).

  6. Customizations:

    • Background Image (Optional): Upload an image to enhance the visual appeal.
    • Background Image (Optional): Upload an image for added visual appeal.
    • Card Color: Customize the color of card components.
    • Brand Color: Apply your brand's primary color across elements.
    • Text Color: Adjust text color to ensure readability.
    • Font Family: Maintain consistency with your brand's typography.

  7. Input Fields:

    • Background Color: Customize the input field background.
    • Border Color: Define the border color for input fields.
    • Link Color: Set the color of links.
    • Button Colors: Set the button color

Reverting Changes: If you wish to revert the configuration, use the "Revert to Default" option to restore default branding. Note that once reverted, previous customizations cannot be recovered.

For further learning and references, check out the following resources: