Custom theme for Keycloak

This article describes how to add a custom theme to the Keycloak managed service in CodeNOW.

Prerequisites

• Keycloak theme
• Keycloak managed service

Steps

1. Set up application for the theme

1. Create a new application.
2. Create docker-generic component.
3. Add your custom theme to the theme directory.
4. Add the code below to your Dockerfile:
   • It will take the content of the theme directory and copy it to the filesystem of the docker container (in the directory /custom).

FROM busybox
COPY theme /custom

1. Push the changes and build the component.
2. After successful build create a new application package.

2. Configure Keycloak

caution

After making changes to an existing theme, consider clearing the cache of your browser. Otherwise, your theme might not load properly.

1. Copy link to access the docker image.
2. Go to the detail of your Keycloak managed service.
3. Scroll down to Configuration and do the following:
   1. Enable custom theme.
   2. Paste the copied docker image in the Custom theme image text field.
   3. Click on Submit.
4. After the pod is reloaded with the new theme (Status = Ready), click on the Admin Panel and login to the Administration Console.
5. Go to Realm settings -> Themes and select the custom theme option. Submit your changes by clicking Save.

Copy your docker image

Go to the detail of your Keycloak managed service

Configure your managed service

When ready, open Admin Panel

Select your theme in Admin Console

1 / 5