Theme Generator

Cloud-IAM Console - Theme Generator feature

What is Keycloak theme generator

The Keycloak Theme Generator is a no-code solution that enables you to visually customize the appearance of your Keycloak login pages directly from the Cloud-IAM Console. It allows you to apply your organization's branding, such as logos, colors, fonts, and layout, without writing any code.

By default, Keycloak includes three themes: base, keycloak, and keycloak.v2. While these provide a functional user interface, they lack visual customization and branding options. To deliver a consistent and professional user experience, most organizations prefer to create custom themes that align with their design guidelines.

With Cloud-IAM’s Theme Generator, you can personalize the look and feel of your Keycloak instance directly from the Cloud-IAM Console. This tool is upgrade-safe, resilient, and designed for non-technical users who want fast results.

How to customize Keycloak Themes in Cloud-IAM

In Cloud-IAM-managed Keycloak deployments, you have two powerful options for customizing your Keycloak login experience:

Use the Theme Generator (No-Code)

The Theme Generator is built into the Cloud-IAM Console and allows you to:

• Customize your Keycloak login pages using a visual editor
• Modify background styles, images, colors, gradients, and button shapes
• Add your company logo and favicon
• Preview changes instantly in real time with WYSIWYG editor
• Ensure compatibility with future Keycloak upgrades
• Apply your theme with a single click

This approach is ideal for most teams that need fast, simple, and upgrade-safe customizations. Cloud-IAM's Theme Generator is designed for ease of use, making it the fastest way to personalize your Keycloak login experience.

Cloud-IAM Maintains Your Theme Compatibility

When you use the Theme Generator, Cloud-IAM automatically ensures your custom theme stays compatible with future Keycloak versions.
You design it once — we handle the upgrades and maintenance behind the scenes. 👌

Custom Keycloak Extension (Advanced)

For advanced use cases that require deep customization, Cloud-IAM also supports custom Keycloak themes via extensions.

This option is better suited for developers and includes:

• Writing .jar files that implement Keycloak SPIs (Service Provider Interfaces)
• Using open-source tools like Keycloakify or the Cloud-IAM Keycloak Theme
• Creating dynamic content, logic-driven UI behavior, and custom templates

More details are available in the Keycloak Custom Theme Guide.

What are the prerequisites to use theme generator feature on Cloud-IAM

Before you can start customizing your Keycloak login pages with the Theme Generator, make sure the following requirements are met:

• Dedicated Keycloak Deployment: The Theme Generator is only available on dedicated Keycloak deployments with a paid Cloud-IAM plan. It is not supported on shared or freemium environments.
• User Permissions: You must have the Editor role assigned to your Cloud-IAM organization account in order to upload, modify, or delete themes. Learn more in the Organization Roles guide.
• Minimum Keycloak Version: Your deployment must be running Keycloak version 26.2 or higher. The Theme Generator feature is not available on older versions.

Once these prerequisites are met, you can begin customizing your Keycloak interface directly from the Cloud-IAM Console using the no-code Theme Generator.

How to create your theme in the Cloud-IAM Console

To configure your custom login theme, follow these steps:

1. Open Cloud-IAM console
2. Select the Keycloak deployment where you want to create the theme
3. Navigate on the Customisation section
4. Select the Generator tab
5. Click Create theme
6. Register a name for your theme and click Create theme
7. Use the visual editor to configure your theme:

• Configure the accent colors
• Control the background appearance
  • Set a background color
  • Set a background image
  • Set a custom CSS background property to achieve effects such as gradients
• Upload resources for the brand logo and favicon
• Adjust the shapes of elements

8. When you're done, click Save
9. To apply the theme to your Keycloak deployment, click Deploy, then confirm the redeployment when prompted.

It may take 5-10 minutes for the theme to be fully installed on your Keycloak deployment.

Manage multiple theme for multiple realms

Since Keycloak supports realm-based theming, Cloud-IAM lets you create and manage multiple themes.
This means you can deliver a unique and branded login experience for each realm individually.

Cloud-IAM Console - Create your Theme

How to apply your Custom Theme in Keycloak admin console

Once your theme is fully deployed (i.e. status : Running):

1. Login to your Keycloak as an admin
2. Select the realm where you want to apply the custom theme
3. Navigate to Realm Settings
4. Click the Themestab
5. In the Login Theme dropdown, select the theme name you created using the Theme Generator.
6. Then Click Save to apply the changes.

Your custom Keycloak theme is now live on the selected realm.

Cloud-IAM Console - Apply your new login experience

Logo visibility in realms

If you are applying your theme to a realm (other then Master realm), you must configure the HTML Display Name field. Otherwise, your logo will not appear in the login screen of that realm.

To proceed:

1. Select your realm from Manage realm list
2. Navigate to Realm setting then General
3. In the HTML Display Name field, paste the following snippet:

   <div class="kc-logo-text"><span>Keycloak</span></div>

4. Click Save to confirm the change

Your custom logo will now display correctly on your realm login pages. If you manage multiple realms, repeat this process for each realm where you want the logo to appear.

How to verify your new login experience

To verify the new login experience:

1. In the Keycloak Admin Console
2. Navigate to Clients
3. Locate the account client and copy its Home URL
4. Open a private/incognito window on your browser and Past the URL

You should see your newly applied branding and layout.

Cloud-IAM Console - Verify your new login experience