Make use of default keycloak theme to get customised theme

Note: Download the keycloak-main from github

1. Locate the default theme: The default theme in Keycloak is typically called “keycloak theme”. Go to the directory where the Keycloak-main is downloaded and navigate to the themes directory. Inside it, you should see a directory named src as shown below

2. Change the META-INF: Go to src and then to main/resources folder , we can see two more folders like META-INF and theme folders

theme directory

go to META-INF folder and it contains keycloak-themes.json as shown below

keycloak-themes.json

Now change the keyclaok-themes.json as shown below , here

name :Name of your theme ( for example i named it as Keycloak-custom-theme)

3. Create Custom-theme folder:create a new folder in the theme directory as keycloak-custom-theme and add all the content from the keycloak folder into keycloak-custom-theme folder

Keycloak folder in themes

4. Now make any changes to img or css folders

\keycloak-custom-theme\login\resources

5. Let us go to img folder and change the background color of the image, For example change the keycloak-bg.png to white color as shown below ,

the black one is default one and it is changed to white png

6. Go to themes directory as shown above and type

mvn clean install

7. Go to target folder and copy the keycloak-themes-999.0.0-SNAPSHOT.jar

and paste it in the keycloak21.x.x/providers and follow below tutorial further

Keycloak custom theme build and run