🔐 My Custom Keycloak Theme

This is a fully custom Keycloak theme created using Keycloakify.

The goal of this project was to learn more about Keycloak and explore how to customize the login and registration pages using modern frontend tools like React, Storybook, and optional UI libraries.

---

🚀 How to Run

1. Build the theme

npm run build-keycloak-theme

This will generate a .jar file in the dist_keycloak/ directory.

2. Run Keycloak with your theme

docker run \
  -v "$(pwd)/dist_keycloak/keycloak-theme-for-kc-all-other-versions.jar":/opt/keycloak/providers/keycloak-theme.jar \
  -p 8080:8080 \
  -e KC_BOOTSTRAP_ADMIN_USERNAME=admin \
  -e KC_BOOTSTRAP_ADMIN_PASSWORD=admin \
  quay.io/keycloak/keycloak:26.0.7 start-dev

🧠 Make sure you're in the project root when running the above command.

3. Apply the theme in the Keycloak Admin UI

• Open http://localhost:8080
• Log in with admin / admin
• Go to Realm Settings → Themes
• Select your custom theme for login pages

---

🛠️ Customization Tips

This theme is based on the keycloakify-starter. You can easily:

• Customize styles via src/login/main.css
• Override components by using npx keycloakify eject-page
• Run npm run storybook to preview and tweak pages live

For full documentation, check out https://docs.keycloakify.dev

---

📎 Related Resources

• Keycloakify Docs
• Customize Translations
• Example Using UI Libraries