🚀 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.
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.
You can also use these as base template for developing a Keycloak theme locally.
- Create a folder for your custom theme within the
src/main/resources/themesdirectory, 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
baseorkeycloaktheme, 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-devwith the included docker-compose file caching off:docker compose up
- Login to the admin console at
http://localhost:8080/auth/adminwithadmin:admin - Go into
Realm Settings->Themesand select the theme you are working on (e.g. Login->example)
- Run
mvn packageto build a jar that can be placed in theprovider(Quarkus) orstandalone/deployments(Wildfly) directory of your Keycloak installation.