getvoicify/keycloak-theme-template

Starter for building a Keycloak theme

🚀 Try it for free in the new Phase Two keycloak managed service.

This repository contains examples for developing a Keycloak login theme locally. You can use the examples directly, customize them and package them with the included Maven project, or use the CSS directly if you are using the Phase Two Themes extension.

Sample themes

The 3 example CSS themes that can be be used in Phase Two's enhanced Keycloak without installing a custom library:

• Consumer consumer/login.css
• Enterprise enterprise/login.css
• SaaS saas/login.css

Look at the article for more information on using the CSS directly with the Phase Two Themes extension.

Install them in the Phase Two Admin UI console by navigating to the Styles section and selecting the Login tab. Paste the style into the CSS field and click Save.

You must have the Attributes login theme selected in Realm settings -> Themes for the changes to take effect.

Keycloak theme template

You can also use these as base template for developing a Keycloak theme locally.

Developing custom Keycloak themes

• Create a folder for your custom theme within the src/main/resources/themes directory, if one does not already exist.
• Then add a subdirectory for the theme type (e.g. admin, login, etc.).
• Modify any of the files within your custom theme directory. Assuming you are extending the base or keycloak theme, you only need to override the files you want to change.
• To easily iterate without having to restart the server every time, load keycloak using start-dev with the included docker-compose file caching off: docker compose up

Testing your theme

• Login to the admin console at http://localhost:8080/auth/admin with admin:admin
• Go into Realm Settings->Themes and select the theme you are working on (e.g. Login->example)

Packaging the theme for deployment

• Run mvn package to build a jar that can be placed in the provider (Quarkus) or standalone/deployments (Wildfly) directory of your Keycloak installation.