Integrating an Existing Theme into Your Keycloakify Project

If you have already created a Keycloak theme using the native theming system, you can easily import it into your Keycloakify project.

This process is straightforward and requires no special configuration. Simply copy the source files of your existing theme and place them into the src directory of your Keycloakify project.

Screenshot showing a native login theme inside a Keycloakify project

Below is a live demonstration using a login theme, but the same process applies to any type of theme.

Theme Variants Support

If your project includes theme variants, they will also work seamlessly with your imported native theme.

You can leverage a special FreeMarker variable in your .ftl files to display the active theme variant dynamically:

src/login/login.ftl

<h1>${xKeycloakify.themeName}</h1>

To customize translations based on the active theme variant, create property files with the following naming pattern:

messages/messages_<language>_override_<theme name>.properties

For example, if you have theme variants named vanilla and chocolate, you can override the loginAccountTitle message key for each variant. Here's an example project structure:

A project with two theme variants, "vanilla" and "chocolate," where the loginAccountTitle message key is overridden for each variant.