We are aiming to customize the Keycloak Admin and Account themes for our internal applications. Unfortunately, the official documentation does not provide specific guidance on this topic. While the available information allows for the customization of static text displayed within the UI, our requirements extend to modifying the CSS to better align with our corporate branding and aesthetic preferences.
The extending the server guide gives you a decent starting point. You can take any of the ftl template files and adjust them to fit your needs. My approach usually started with the themes in the source keycloak/themes/src/main/resources/theme at 24.0.3 · keycloak/keycloak · GitHub and then overriding the files as necessary in my own theme folder. Word of caution, always double check you select the tag of the version you want to deploy otherwise you’ll see the weirdest issues.
Otherwise there are projects like GitHub - keycloakify/keycloakify: 🔏 Create Keycloak themes using React, which can make things easier, but personally i have no experience with it yet.
The login theme (the current standard one and the upcoming (preview) v2 one) are both fairly straightforward to customize and override, although tedious to maintain. Just as a warning, consider this when customizing as it will increase the cost of future upgrades, as you’ll have to diff your custom theme with the upstream changes and adapt them accordingly and test it extensively. And you probably don’t want to end up like many people here, with a keycloak version that it many years old.
For the new account console (v3) my experience has been mixed, I’ve posted some ramblings about it on github Administrator experience of customizing account console v3 · keycloak/keycloak · Discussion #28393 · GitHub.
At least the examples how to extend it have been updated keycloak-quickstarts/extension/extend-account-console at release/24.0 · keycloak/keycloak-quickstarts · GitHub, so they might be worth a look.
Dumb question: Where do I find the original v3 theme files? They don’t seem to be included with lib/lib/main/org.keycloak.keycloak-themes-25.0.0.jar
.
they got moved to a different maven module (js). There might be a dedicated jar for that. So far my workflow has been to just build that module myself and obtain the file from the target folder.
Hi, same issue here. Searching for the default template but can’t find it. Need this as example for modifications.
Anyone could help?
Thanks in advance.
Ok, are these the source files?
So the workflow is to build that module with pnpm run build
, and then make your modifications to it’s target folder, did I get that right?
Depends on what you want to do, I just needed to add a few lines to the index.ftl
so i just copy that one over so the old override mechanism continues to work.
Sorry, I’m not sure how to get the template.
What I actually want to do is just swap the logos and hide the applications.
Is there any smart way to do this?
Thank you so much
Hi all,
Is is possible to change logo, icon and favicon in keycloak 23.0.3 ?
As I tried to do the same but I am unable to do so as always there error saying:
-
Refused to apply style from ‘http://localhost:8080/resources/dlzsz/admin/mytheme/css/styles.css’ because its MIME type (‘’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.
-
GET http://localhost:8080/resources/dlzsz/admin/mytheme/public/logo.svg 404 (Not Found)
I don’t understand from where it is taking this path “resources/dlzsz/”.
Any guidance would be appreciated.
Thanks & Regards
Shail M.
Overriding parts of your theme is possible and documented here: Server Developer Guide
Create a custom theme, add these to the resources, set the theme properties correctly and the automatic overrides will grab the files from your theme first.
Hi ThoreKr,
Thanks for the response. I already seen this documentation and it does not helped me to customize admin console specially I wanted to change the title favicon, logo and body icon.
This documentation focused on login customization mainly. and that is working fine.
please suggest me ways to customize admin console.
thanks.
The current v3 index.ftl
is included in the keycloak release archive within lib/lib/main/org.keycloak.keycloak-account-ui-${version}.jar
as theme/keycloak.v3/account/index.ftl
.
Extract it into themes/$mythemename/account/index.ftl
and make your modifications.
If you only need to set logo and/or add custom stylesheets, you can do that just like before:
themes/$mythemename/account/theme.properties
:
parent=keycloak.v3
logo=/img/mylogo.svg
styles=css/mystyle.css
(v3 does not itself include a stylesheet via styles=css/styles.css
.)
- OP is talking about
admin
theme, notaccount
theme like you do. - Never modify the binaries which are delivered with Keycloak itself. Keycloak has the ability to provide custom themes for reasons! Modifying binaries will lead to unpredictable side-effects, sooner or later. Simply don’t do it. Deploy your custom themes!
- It works for the admin theme in
lib/lib/main/org.keycloak.keycloak-admin-ui-25.0.0.jar
the same way, doesn’t it? - I did not suggest to modify the delivered binaries.
Ok, sorry, was reading too fast, my fault.
But pointing others to binaries is a misleading way. It’s open source, all the source files are available on GitHub, no one needs (and should not) grab them from built binaries. I saw too much crap and errors happening this way.
Hi Jovo,
As you have mentioned keycloak.v3, but there is no v3 in keycloak 23.0.3 version. keycloak.v3 is available on 24.x and onwards. So, is there still a way to change logo and others for admin console in keycloak 23.0.3.
Thanks & Regards
Shail M.
This is exactly the issue, as the index.ftl is no longer part of the source but a built artifact. Unfortunately the hashes in the js imports change on every release thus requiring you to extract it from some kind of released asset.
To my knowledge, the only ways to obtain the index.ftl is either checking out the source and building the js module yourself or rummaging through the binaries.