Description

The Quick theme feature has a big potential to fulfill the requirements of users/customers to customize their themes for Keycloak. However, in order to use it and potentially promote it to supported, we should improve the experience and capabilities for the quick theme.

Goals

• Improve the feature to be the official tool for simple theme customization
• Improve user experience when customizing themes

Non-Goals

• Promoting the feature to supported
• Provide advanced capabilities for customization (customize every page separately,...)

Notes

The important part is to show the preview of the login page. Something like this:

Other feedback

As @thomasdarimont mentioned here, there might also be these improvements:

• 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.