👍 I like this

what also would be cool, maybe outside of this PR, but to be able to set other things like rounded corners, see this link for some more ideas https://keycloak-theme-editor.tpvk7sed8.workers.dev/

what also would be cool, maybe outside of this PR, but to be able to set other things like rounded corners

@edewit Yes, that's true. We could provide some basic attributes by default that are frequently changed - rounder corners, background properties,...

And if it's not sufficient, there might be also a custom text input box for custom CSS (with all these validations of course).

There should be also a capability to change the name of the theme.

@ssilvert @edewit Could you please check it? Thanks!

Other improvements can be done in follow-up tasks.

Some of them already identified in the milestone:

• Improve the Quick theme feature to fulfill basic customization #45523

@mabartos I like this too.

However, at first it wasn't clear to me that I would need to scroll down to see the original WYSIWYG that was more based on admin console. Maybe this is more clear if I was looking at it live rather than in the video?

Any ideas?

@ssilvert Thanks for the comment.

This is the initial form and it still needs some improvements. At this moment, the login preview is on top and the admin preview is under that. However, I thought that we could provide some Init page when users want to customize themes. That they could choose what component they want to customize (login, account, admin, or all) and the specific preview would be shown. Captured here: #45531

Or there might be some 3 way "switch" at the top of the preview "Login | Account | Admin", and only one could be choosen and then shown. And admins could just switch to other preview to see how it looks like for other previews.

But we can discuss more :)

@edewit As we discussed, this initiative will be more targeted to 26.7, but if you have some spare time, you could check it and potentially add whatever suits to the TS changes.

@ssilvert it moves down when there isn't enough room if you make your screen a bit wider then if fits. What we could do is collapse the sidebar on this screen so that the user has more room to edit. Right now when you "design" a theme it creates a theme that can be applied to all "apps", you can then opt to only use it for the login once installed, so I don't think we need to ask a user here what they want to theme. So I rather have a tab control so they can see what the changes look like for the different "apps".

@edewit LGTM.

@mabartos @edewit Is this ready to be merged?

@vmuzikar Yes :)

@mabartos I just gave your branch quick-theme-login, but on my machine it still looks like this:

Additionally, MacOS reports the generated quick-theme.jar as potentially mallicios - I needed to extract it via the terminal to view it's contents.

Some additional feedback:

• Add some additional structure (Colors, Fonts, Borders, Logo)
  This would help to make tge growing list of config options less daunting.
• Make it easier to match the customization with the target element
  Right now it is hard to see beforehand which element is affacted by a particlar style. For example if I inspect the generated <button class="pf-v5-c-button pf-m-primary pf-m-block" name="login" id="kc-login" type="submit">Sign In</button> with dev tools I don't see immediately which style option is affecting this element.
  I dev tools I see background-color: var(--pf-v5-c-button--m-primary--Color) - which Style option do I need to modify to change the color? Perhaps it would help to show a (?) next to the style option that mentions the actual css class / css-variable.
  Another option would be to briefly highlight the respective target element in the preview when clicking in a styling option.
• Logo Position and Visibility
  It would be helpfil if we could control the logo alignment (left, center, right)
• Logo location (URL instead of upload)
  Some customers prefer to use a logo from a predefined URI that they control.
• Identity Provider Button Location
  Some customer want to show the identity provider icons first and offer the username/password as a secondary option.
• Page State Toggles:
  It would be helpful to toggle different page states (status: error/success, focussed, hover) to quickly preview the effect of the styling.
• Support for customizing font sizes (Title, Subtitle, Body, Buttons, Labels, Links)
  This would make the styling capabilities more complete.
• Support more use-case pages (Registration, Required Action, Profile validation, Consent, 2FA screens, Error)
  This would help to view the styling in action directly.
• Add support to import/export a style preset as json
  This can be exchanged easier than sending a jar around (e.g. some companies might block .jar attachments in emails).
• Add support to select locale for preview
  This would make it easier to see issues with too long texts etc.

I'm looking forward to this feature finally being implemented!

@thomasdarimont Oops, that's weird... I'll check it tomorrow. Thanks!

Nice list of possible improvements though!

Resolved conflict and rebased.

I can confirm it works even with the new light/dark switch:

@edewit Fixed lint error.

@edewit Thanks for the review!

@vmuzikar We should be ready to go with this one :) Thanks!