Skip to main content

Custom theme for Keycloak

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

Prerequisites​

info

In order to create a Keycloak theme, follow the official tutorial. Properties that you can change, can be found here. Ready-made demo theme for CodeNOW is available on gitlab.

Steps​

1. Set up an application for the theme​

  1. Create a new application.
  2. Create docker-generic component.
  3. Create a new folder named theme in the root directory of your project. The folder has to be in the same location as your Dockerfile.
  4. Add your custom themes into the theme directory.
caution

Keycloak supports creating several custom theme types (e.g. account, login...). The directory for each type should be placed directly in your theme folder, with no sub-folders.

  1. Replace the code in your Dockerfile with the sample below:
    • 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 a 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 the custom theme.
    2. Paste the copied docker image into 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