Request: Extend Login Theme Keywind

[paulwer]

Hello everyone, I want to encourage your to think about implementing the keywind login theme. I think this could be a great addition to the existing services and would match nicely with the exsiting themes and artworks provided on your website.

https://github.com/lukin/keywind

[xgp]

That's a neat suggestion. I hadn't seen Keywind before.

To what end are you suggesting we include this? As an example theme others can extend? As a theme bundled with this extension? For our hosted service?

[paulwer]

you already had an atribute based theme solution which is quite nice and can be used with this theme to unlock even more.

like an attribute enabled keywind.

i suggest to include this in the hosted service and in the open-source docker image as part of p2-inc/keycloak-themes. Maybe as an additionaly selectable theme, to support the old one as well.

[paulwer]

@xgp i already support the icon and the custom styles in my instance, so its pretty easy to get started with this.

[xgp]

Got it. Thanks for the suggestion. If you can share your implementation, I'd be happy to add it.

[paulwer]

@xgp

i indeed custumize alot of things, so just providing the theme is not that necessary from my point of view, therefore i descided to write down some steps, so you can do the same like me:

1. Download / Clone / Fork the repo (f.ex. into p2-inc/keycloak-themes)
2. customize the components (keywind is created component-based, so you can change some behavior for all sites with one change:
   • go to document.ftl and add: (support for favicon & stylesheet)

     <link rel="icon" href="${url.resourcesPath?keep_before("/resources")}/realms/${realm.name}/assets/img/favicon" />
     <link href="${url.resourcesPath?keep_before("/resources")}/realms/${realm.name}/assets/css/login.css" rel="stylesheet" />

this is possible, because your themese-provider works globaly and therefore here as well. (from my pov)

=> just add all your customization options f.ex. into the header like you already did with your default theme.

3. Build the related files (npm run build) => required, because the tailwind-classes are otherwise not present in the latest build
4. Adding the theme to META_INF
5. Package as jar file with your existing theme as normal (therefore the jar will import the options for keycloak and 2 different themes to choose from)

fyi: what did we customize:

• adding background video as new component in template.ftl https://daily-dev-tips.com/posts/tailwind-css-full-screen-video-header/
• adding a background logo (also an abstract component)
• adding footer-component, which takes the existing languageSelector component as nested input and displays additional links (data-security & impress with links to the language aware websites, which shows the content [different links for each language])

here are some ideas, which options could enhance the keywind theme defined by keycloak-admin-ui or your default theme even further:

• additional links (f.ex. for data-security & impress link (required in EU)
• background image OR background video
• background logo (maybe with positioning options)
• adding custom css-classes like in your existing theme (+adding them into a Readme.md for better startup for users)

[xgp]

I'll link this from the README. TY @paulwer

[paulwer]

i guess if you add it as an additional theme this could be realy usefull for all. ❤️