Customize Keycloak with themes

[@RobFine]

This was incredibly helpful. Thanks so much! The admin and account theme files being in the jar was exactly what I was missing.

[@learningsoftwareskills]

You are welcome 👍🙏

[@dancersys]

Very useful, thank you so much. I have Keycloak installed on a Debian machine, but logic is the same. I managed to change authorization error page style and message thanks to you :)

[@learningsoftwareskills]

You are welcome 🙏👍

[@VelfinScriptLab]

Excellent video, you saved my life, I spent days trying to do it until I saw your excellent video, I am a new subscriber

[@learningsoftwareskills]

Thanks a lot for your awesome feedback 👍🙏

[@JoyKarmakar-zo7im]

I saw other videos also about this topic I didn't understand properly and in your video you explained in so simple, I can understand this topic now. Thank you so much.

[@learningsoftwareskills]

Hi, thanks for the awesome feedback 👍🙏

[@lenhatminhkhoi9174]

Super detailed and legible. Thank you so much !!!

[@learningsoftwareskills]

Thank you for the encouraging feedback 👍🙏

[@nima.shokouhfar]

Great video. Now, I am more clear what is going on.

[@learningsoftwareskills]

@@nima.shokouhfar thank you very much for the amazing feedback 👍🙏

[@rabahalishah5124]

My theme is not showing up in the drop down of theme section in realm settings. Can you please tell me why is it so? I have created the exact anatomy as yours and restarted my server. But still I'm theme is not showing. My version of keycloak is 26.0.2.

[@learningsoftwareskills]

Hi, please check if the theme folder is created in the right folder and also check the theme.properties file. Also see the offical documentation at www.keycloak.org/docs/latest/server_development/index.html#_themes

[@redcrown5070]

This video is great! Thanks so much!

[@learningsoftwareskills]

Thank you very much 👍🙏

[@greosera6101]

So, it's not fully free styling to customize the login page? can only override some images by naming the same with the parent? I was thinking about fully customize the login page.

[@learningsoftwareskills]

You can do that by extending the base theme instead of keycloak theme. I have not tried it but it would tough if you want a completely different login page

[@upcomingprogrammer6244]

This is wonderful tutorial. It's gave clear picture of theming of keycloak , I have one question regarding keycloak account theme , i want to add some button, custom element in the page for that what need to be done. Please advise.

[@learningsoftwareskills]

hi, you can create a complete theme from scratch by extending the base theme. But that would be difficult to develop and maintain. I would suggest extending the default keycloak theme. If you want to add new html markup to the pages, you can overwrite the ftl files of the parent theme in the new theme. Hope this helps, cheers 👍

[@upcomingprogrammer6244]

@@learningsoftwareskills Yes I have implemented it , I needed more customisation so I needed to write everything from scratch, almost i touched all their tsx files and compiled it made a jar and placed into provider it works. By the way Thank you very much , your video gave me kick start on extending themes.

[@learningsoftwareskills]

@@upcomingprogrammer6244 thank u for the encouraging feedback 👍🙏

[@maheshreddy8236]

I am not able to start the server. The following error is occurring D:\keycloak-26.0.5>bin\kc.bat start-dev JAVA_HOME is not set. Unexpected results may occur. Set JAVA_HOME to the directory of your local JDK to avoid this message. Unrecognized option: --add-opens=java.base/java.util=ALL-UNNAMED Error: Could not create the Java Virtual Machine. Error: A fatal exception has occurred. Program will exit. D:\keycloak-26.0.5>

[@learningsoftwareskills]

Hi, you need to first install the OpenJDK. Download zip from learn.microsoft.com/en-us/java/openjdk/download#openjdk-21. Unzip the OpenJDK folder from zip file. Set the JAVA_HOME system environment variable to the OpenJDK folder. Hope this helps, cheers 👍

[@BRCSMohammedowais]

i performed the same steps but for a realm login page, i am not able to replace logo with realm name

[@learningsoftwareskills]

Hi, the version used in this video is an image in the login screen. But in the new versions of keycloak, the login screen displays the realm name instead of logo image. So rename the realm name as per requirement and it will be displayed in the login screen

[@NaveenKumar-qx9gt]

"I have configured multiple IDPs in Keycloak. Is it possible to automatically log in through a particular IDP based on the user's email domain? Additionally, on the login page, can only the email field be displayed?"

[@learningsoftwareskills]

Hi i don't think automatically choosing an IDP based on the user email address is possible. The user needs to explicitly select the IDP to login first.

[@avineeshkumar5384]

Hello, I just have a little question about theming keycloak. I modify a bit the css and logo to make a custom login page. After I import the newly created theme I apply it and it works well for the master Realm, but when I apply this theme to another Realm I've the Realm name that appears on the login page instead of my logo. How can I make my logo appears instead of the realm name ? Is it something to configure in keycloak ? or a property to change in the theme properties ?

[@learningsoftwareskills]

Hi, please send the screenshot to [e-mail] Let us see what is the issue

[@kenjiong6897]

I have the same issue as well

[@ganeshbabu8263]

Thanks a lot 🙏🏻, can you describe and make a video about keycloakify video

[@learningsoftwareskills]

Hi, thanks for the feedback. I will try to know about it and try to make a video. Cheers 👍

[@nousername-l8u]

How to do it with docker keycloak

[@learningsoftwareskills]

kzbin.info/www/bejne/o6qtfYWqadWjiZYsi=3bsqInf-nOBpuMdR Hi, while building your keycloak docker container, you can copy the theme files to the opt/jboss/keycloak/themes as shown in the above video. Hope this helps, cheers 👍

[@Aaron-pc5md]

Can you provide the code for each file? in the login section?

[@learningsoftwareskills]

Hi, all the code for the video is present in the blogpost for this video at nagasudhir.blogspot.com/2024/04/customize-keycloak-appearance-with.html Hope this helps, cheers 👍

[@Programming_Codding]

how to do the same in docker

[@learningsoftwareskills]

Hi, good question. to achieve custom theme in keycloak running in docker, you need to copy the theme files into the docker container by writing copy command in the docker file something like below COPY ./themes/my-theme/ /opt/keycloak/themes/my-theme Some of the links on this topic are shown below * github.com/saurav-samantray/custom-auth-service/blob/main/Dockerfile , saurav-samantray.medium.com/dockerize-keycloak-21-with-a-custom-theme-b6f2acad03d5 * stackoverflow.com/questions/52641379/keycloak-deploy-custom-theme-in-docker If you solve this, write back about your experience. Hope this helps, cheers 👍

[@JeremiahManuel]

not working, no source code, could have been better with github repo

[@learningsoftwareskills]

@@JeremiahManuel hi, the code can be found the blogpost at nagasudhir.blogspot.com/2024/04/customize-keycloak-appearance-with.html Hope this helps, cheers 👍