Keycloak use custom html for themes

1.1k Views Asked by At

My problem is that I want to add a custom theme to my Keycloak login page, but I'm unsure of the process, especially when it comes to modifying the HTML code correctly.

I attempted to inspect the HTML code of Keycloak's base theme by using my browser's developer tools. I copied it into my project and added some CSS to customize it. However, my main challenge arises from not knowing how to modify the HTML file correctly.

For example, in the HTML code, I noticed the following line:

<form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="https://ipAdress/realms/RealmName/login-actions/authenticate?session_code=Z2npL04Juc9peeAP9ELJES-J3iIorvCT5MHiU&amp;execution=c801eb-eba-4d8-808d-aea447ebbd&amp;client_id=testClient&amp;tab_id=X-PrGL7s" method="post">

This line seems to include a session code that I can't merely integrate into my custom theme's HTML. However, I also can't just omit it. It appears that I might be misunderstanding how this process is working.

Thank you!

1

There are 1 best solutions below

3
danielRICADO On

Copy the base theme already containing the key bits of code you'll need to make it work from themes/keycloak/login to themes/custom.

In the admin console go to realms -> themes the new theme will appear in the dropdown.

The session value is likely either injected somehow at runtime or is coming from a template variable. Either way the keycloak login theme contains everything you need.