Extending Keycloak theme

Viewed 2812

I would like to create a custom theme for keycloak for replacing some user-facing pages with a different style. The keycloak manual describes this process of Creating a Theme and recommends to derive a custom theme from an existing one.

For doing that, the docs reference in the Theme Properties this properties:

  • parent - Parent theme to extend
  • import - Import resources from another theme

with an example of

parent=base
import=common/keycloak

Unfortunately, the docs do not describe how that theme-extension does actually work (or I don't get it...).

Does the "parent=base" automatically use all files from that theme and just overlays those from the new theme?

What does the "import=common/keycloak" reference? I can't find any component or file path in the base theme where that would match.

2 Answers

When you say parent=base you are extending the base theme.

In your theme.properties the import=common/keycloak imports all the resources from keycloak theme of type common

you can find resources in <KEYCLOAK-HOME>/themes/keycloak/common

If any of you is interested, I created a theme builder that let you extend the default Keycloak theme... or create a new one from scratch. Example:

enter image description here

Checkout Keycloakify

Related