Skip to main content

Login Page & Branding

LumoAuth lets you fully customize the login experience for your users — from your logo and brand colors to custom CSS and AI-generated themes. Each tenant has its own independent branding configuration.

Accessing Login Page Settings​

Go to /t/{tenantSlug}/portal/settings/login-page in your tenant portal.

Basic Branding​

Upload your logo to display at the top of the login page. Recommended format: PNG or SVG, transparent background, minimum 200px wide.

Welcome Text​

Set the headline shown above the login form — for example, "Welcome to Acme Corp" or "Sign in to continue".

Footer Text​

Add a footer message, such as contact information or a support link.

Colors & Background​

SettingDescription
Primary ColorUsed for buttons, links, and focus indicators
Text ColorMain body text color
Background TypeChoose between solid color, gradient, or pattern

For a gradient background, configure two colors and a direction. For a pattern background, choose from the available built-in patterns.

Layout Options​

Select from available layout templates to control how the login form is positioned on the page (center, left-aligned, split-screen, etc.).

Per-Application Branding​

You can configure separate branding for individual OAuth applications:

  1. Go to /t/{tenantSlug}/portal/applications/oidc/{clientId}
  2. Open the Login Page tab
  3. Override the tenant-level logo, colors, and welcome text for this specific application

This is useful if you serve multiple products under one tenant but want each to have its own branded login experience.

AI Theme Generation​

LumoAuth can automatically generate a matching color scheme and visual style by analyzing your website.

  1. Go to /t/{tenantSlug}/portal/settings/login-page
  2. Click Generate Theme with AI
  3. Enter your website URL
  4. LumoAuth analyzes your site's colors, fonts, and style, then suggests a matching login page theme
  5. Preview the result and apply it or adjust individual settings
note

AI theme generation requires a configured AI provider in your tenant settings. The feature uses your website's publicly accessible home page — no login or access is needed.

Custom CSS​

Inject custom CSS to override any aspect of the login page appearance:

/* Example: rounded login card with a shadow */
.login-card {
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Example: custom font */
body {
  font-family: 'Inter', sans-serif;
}

Paste your CSS in the Custom CSS field. Changes take effect immediately for new login page loads.

Custom HTML​

You can inject additional HTML into the login page — for example, to add a privacy notice, a help link, or a language selector in the header or footer.

Content Security

Custom HTML is rendered inside the login page. Avoid including external scripts or iframes from untrusted sources. LumoAuth sanitizes output, but adding complex third-party code may affect functionality or security.

Preview​

Use the Preview button in the portal to see your changes before they go live. The preview shows the exact login page your users will see, including the configured authentication methods.

Per-Application Consent Page​

In addition to the login page, you can also customize the OAuth consent page per application:

  1. Go to /t/{tenantSlug}/portal/applications/oidc/{clientId}
  2. Open the Consent Page tab
  3. Configure the logo, description, and scope display names shown to users when they authorize your app