Skip to content

Getting started ​

Keycloak Theme Editor styles the login pages Keycloak shows when your app sends someone there to sign in: login, registration, password reset, OTP, passkeys, and the screens around them. It doesn't touch the Account Console, Admin Console, or email templates: those are separate Keycloak theme types.

Build a theme ​

  1. Open keycloak-theme-editor.org.
  2. In Quick start, pick a Style and Layout. Not sure where to start? v2 and Card is the closest match to Keycloak's default look.
  3. Set your primary color, typography, background, and logo. Check both light and dark mode.
  4. Step through the other preview pages: registration, password reset, OTP, an error state, and a narrow viewport.
  5. Open Export theme, give it a name you'll recognize later (e.g. acme-login), and download the JAR.
  6. Deploy it to a test Keycloak instance and sign in through your actual app.

Export often. The editor's state lives in your browser: use Import theme to reload a previous export and pick up where you left off.

Where to go next ​

  • Need Bootstrap, Carbon, or a different page layout? See Styles and layouts.
  • Branding a product, or giving each customer portal its own look? See Branding.
  • Adding German, French, or another language? See Translations.
  • Hand-editing a FreeMarker template, or want theme files in your own repo? See Local development.
  • Ready to ship? See Deployment.

What the preview shows ​

The preview renders the real templates with sample data: it's accurate for layout, spacing, copy, and assets. It's still static, though. It won't send an email, complete a passkey enrollment, or check a password against a real user. Verify those against an actual Keycloak instance before you ship.

Which version this covers ​

These docs track the editor's current source, including Bootstrap, Carbon, and per-layout styling. The preview is generated against Keycloak 26.7.3 (pinned here): a preview baseline, not a compatibility guarantee for whatever version you run. If something described here is missing from your install, you're likely on an older release; see checking your CLI version.