Keycloak allows customizing themes that are applied to different pages like login, account, and admin pages. To create a custom theme: 1. Create a new directory for the theme inside the themes folder and add property and template files. 2. Override default template files by copying them to the new theme directory and customize styles and structure. 3. Configure the theme.properties file to set parent theme, stylesheets, and customize tags. 4. Add CSS files to the theme's resources folder and reference them in theme.properties to apply custom styles.

1. Keycloak Theme
configurations
HOW TO CHANGE DEFAULT KEYCLOAOK THEMEHow to change the default Keycloak theme

2. Page 1 of 6
Content
Keycloak themes…………………………………………………..02
Before adding new themes…………………………………..03
Add new themes……………………………………………………03
Create your own theme………………………………………..05
What is theme.property file ?..............................06
Change styles related to your theme……………………06
Change the template structure…………………………….06

3. Page 2 of 6
Keycloak themes
• First, configure Keycloak server with Spring Boot application.
• Keycloak themes can be changed after login to the Keycloak dashboard as admin.
• Go to Realm settings and select Themes tab.
• Now you can see some options about themes and language support.
• There are several options to change the default theme.
• It can be changed the Login theme, Account theme, Admin console theme…etc.
• By default, two themes are provided (base and keycloak) for each option.

4. Page 3 of 6
Before adding new themes
• Before adding new themes, some configurations need to be done.
• According to Keycloak documentation theme caching and template caching can be disabled. This allows user
to edit themes without restarting the Keycloak server.
• To change this, go to the standalone directory and then go inside configuration.
Keycloak -> standalone -> configuration -> standalone.xml
• There are several files, but only standalone.xml should be changed.
• Please change it as follows.
• But please remember the re-enable it in production!!!
Add new themes
• New themes can be added, where Keycloak server is installed.
• Basically, Keycloak server looks like this. Please refer following image.

5. Page 4 of 6
• New themes should be added to themes directory.
• By default, three Themes are available (base, keycloak and keycloak-preview)
• Base theme consists of basic template files for each page without styles. It acts as the parent.
• Keycloak theme extends Base theme and it has some specific styles.
• Documentation says not to edit preloaded themes, instead create your own theme and extends the base theme
according to your requirements.
• You can change themes for account, admin, email, login and welcome pages. Above directory names should
be exactly same. You cannot change those directory names.

6. Page 5 of 6
Create your own theme
• Let’s create a new theme called “sml”. In this theme I am going customize the login page.
• Create a folder inside the Theme directory and that folder name becomes the name of the theme.
• Here is the flow. Please use exact words for directories and files.
1. Go to Keycloak -> themes
2. Create a directory called “sml”. This will be the theme name.
3. Go to sml directory
4. Create a directory called login. This specify that you are going to change the login theme.
5. Go inside of login directory
6. Create a directory called resources and create a property file called theme.properties. Resources
directory contains all resources files such as styles and images.
7. theme.properties file contains property definitions.
8. Go inside of the resources directory and create two directories called css and img.
9. css directory for style sheets and img directory is for images.

7. Page 6 of 6
What is theme.property file ?
• theme.property file consists some basic configuration things.
1. Parent class (parent=keycloak)
2. Where style sheets are located (styles=css/styles.css)
3. Keycloak tags related to Bootstrap tags (kcHtmlClass=login-pf)
• Here is the sample theme .property file.
parent=keycloak
import=common/keycloak
styles=lib/patternfly/css/patternfly.css lib/zocial/zocial.css css/login.css css/logo.css css/styles.css
kcHtmlClass=login-pf
kcContentClass=col-sm-12 col-md-12 col-lg-12 container
kcContentWrapperClass=row
kcHeaderClass=col-xs-12 col-sm-8 col-md-8 col-lg-7
kcFeedbackAreaClass=col-md-12
kcAlertIconClasserror=pficon pficon-error-circle-o
kcFormAreaClass=col-xs-12 col-sm-8 col-md-8 col-lg-7 login
kcFeedbackErrorIcon=pficon pficon-error-circle-o
Change styles related to your theme
• Inside of the css directory you can create style sheets as you preferred. Once you create a stylesheet, it needs
to be mentioned in the theme.properties file.
styles=css/login.css
Change the template structure
• If you want to change the structure of the template, you need to change the related freemaker template
files.
• There are two ways to change the template.
1. Change the Base template – NOT RECOMMENTED
2. Override the template and change it – BEST OPTION
• As I mentioned, ‘override the template’ is the best option.
• Just what you need to do is,
Get a copy from template file (Keycloak -> themes -> base -> login -> login.ftl)
Save it in your theme location (Keycloak -> themes -> sml -> login -> login.ftl)
• Then you can edit saved template according to your requirements and you can add new styles as mentioned
above.