Skip to main content

Match your brand

Omni sign-in experience​

Customize the look and feel of your sign-in page by navigating to Console > Sign-in experience > Branding. This section allows you to easily adjust key branding elements.

Brand color

Define the primary color used throughout the sign-in experience, including primary buttons, links, and other components. Replace the default Logto purple color with your brand's color. For dark mode, a separate brand color can be specified.

Company logo

The logo will be displayed on the sign-in homepage, sign-up home, loading page, and other interfaces with our expansion.

  • There are some limitations for images: they must be under 500KB and in SVG, PNG, JPG, JPEG, or ICO format.
  • If you leave the logo field blank, the logo will not display in the interface.
  • A dark mode version of the logo can also be uploaded.

Favicon

A favicon is a small icon representing a website and is displayed in the browser tab, bookmarks, and other areas of the browser interface.

  • The image must be under 500KB and in SVG, PNG, JPG, JPEG, or ICO format. Uploading a square image is recommended to ensure a good presentation effect.
  • A dark mode version of the favicon can also be uploaded.
  • Besides, the browser title for different flows (Sign in/Sign up/Forgot password, etc.) is now used instead of a custom title.

Dark mode

Enable dark mode to automatically adjust the sign-in page's appearance based on the user's system preferences.

App-specific branding​

If your multi-app business needs app-level sign-in experiences, you can configure this in the application details page. Navigate to Console > Applications.

By switching on "app-level sign-in experience", you can set up specific branding and colors for each app. When a sign-in initiated from an app with app-level branding enabled, the sign-in experience will be customized according to the app-level branding settings; otherwise, it will default to the omni sign-in experience settings.

Both light and dark mode settings are available for app-level branding. Dark mode settings will only take effect when the dark mode is enabled in the omni sign-in experience settings.

Organization-specific branding​

To dynamically show your client’s organization logo in the sign-in experience, you can upload the organization logos in the organization settings page. Navigate to Console > Organizations.

Then, when triggering a sign-in, you can pass the organization ID in the organization_id parameter to tell Logto which organization logo to display. For example, to show the organization logo for organization ID 123456:

  • If you are using Logto SDK, you can pass the organization_id parameter in the extraParams object of the signIn method.
  • If you are using an OIDC client, you can pass the organization_id parameter when requesting the authorization endpoint.

Both light and dark mode settings are available for organization-level branding. Dark mode settings will only take effect when the dark mode is enabled in the omni sign-in experience settings.

Here's an example of how to pass the organization_id parameter in the signIn method using Logto browser SDK:

index.ts

logtoClient.signIn({
  // ...other parameters
  redirectUri: 'https://your-redirect-uri',
  extraParams: {
    organization_id: '123456',
  },
});
note:

We are gradually rolling out the extraParams feature to all Logto SDKs. If you don't see it in your SDK yet, please contact us.

How to customize the sign-in experience for each app or organization?