open-how2 – Entdecke. Verstehe. Nutze.
Veröffentlicht am
• How2-Tipps

Themes & Branding – Login-Seiten in Keycloak individuell gestalten

Autor
Themes & Branding – Login-Seiten in Keycloak individuell gestalten

**Blogartikel: **

Wer Keycloak in einer Organisation einsetzt, möchte seinen Benutzern beim Login ein vertrautes Erlebnis bieten. Standardmäßig präsentiert sich Keycloak im schlichten Rot-Grau-Design – funktional, aber kaum passend zu einer modernen Corporate Identity.

Die gute Nachricht: Mit Themes und Branding lässt sich das Erscheinungsbild von Keycloak vollständig anpassen – vom Login über die Registrierung bis zum Passwort-Reset. In diesem Artikel zeigen wir, wie du dein eigenes Corporate Design in Keycloak integrierst und ein konsistentes Benutzererlebnis über alle Anwendungen hinweg schaffst.

Warum Branding in Keycloak wichtig ist

Die Login-Seite ist oft der erste Kontaktpunkt zwischen Benutzern und einem digitalen Dienst. Ein individuelles Design schafft Vertrauen und stärkt die Markenidentität.

Vorteile eines angepassten Keycloak-Designs: ✅ Einheitliches Corporate Design über alle Systeme ✅ Professioneller Eindruck für Mitarbeiter, Kunden oder Bürger ✅ Klare Benutzerführung (UX) ✅ Möglichkeit, Nutzungsinformationen oder Datenschutz-Hinweise einzubauen

Aufbau eines Keycloak-Themes

Keycloak-Themes sind modular aufgebaut. Jedes Theme besteht aus einem eigenen Ordner und kann HTML-, CSS-, JS- und Bilddateien enthalten.

Speicherort

Im Standard-Setup liegt das Theme-Verzeichnis unter:

/opt/keycloak/themes/

Darin befinden sich Unterordner für:

  • base → Grundstruktur
  • keycloak → Standard-Theme
  • custom-theme → dein eigenes Theme

Jedes Theme hat eine bestimmte Kategorie:

login/
email/
account/
welcome/
admin/

Für Branding-Zwecke ist vor allem der Ordner login/ relevant.

Schritt 1: Eigenes Theme anlegen

Kopiere das Standard-Login-Theme und lege dein eigenes an:

cd /opt/keycloak/themes
cp -r base mytheme

Bearbeite dann die Theme-Definition:

nano mytheme/theme.properties

Beispiel:

parent=base
import=common/keycloak
styles=css/login.css

Hier legst du fest, welche CSS-Dateien und Templates dein Theme nutzt.

Schritt 2: HTML & CSS anpassen

Die Templates liegen im Verzeichnis:

/opt/keycloak/themes/mytheme/login/

Die Datei login.ftl (FreeMarker Template Language) enthält das Grundgerüst der Anmeldeseite. Hier kannst du dein Logo, Farbwerte und Texte einfügen.

Beispielauszug:

<div id="kc-logo">
  <img src="${url.resourcesPath}/img/company-logo.png" alt="Mein Unternehmen">
</div>
<h1>Willkommen im Serviceportal</h1>

Passe dein CSS an:

body {
  background: linear-gradient(135deg, #003366, #0099cc);
  color: #ffffff;
  font-family: "Open Sans", sans-serif;
}

#kc-form-login {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 30px;
}

Schritt 3: Bilder & Logos einbinden

Lege eigene Logos oder Hintergrundgrafiken unter:

/opt/keycloak/themes/mytheme/resources/img/

Beispiel:

  • company-logo.png
  • background.jpg

Du kannst auch unterschiedliche Varianten für Login und Passwort-Reset verwenden.

Schritt 4: Theme aktivieren

Öffne die Keycloak-Admin-Konsole → Realm Settings → Themes und wähle dein Theme in den Dropdowns aus:

Bereich Theme auswählen
Login Theme mytheme
Account Theme keycloak (oder eigenes)
Email Theme keycloak (optional)

Speichern – und schon erscheint dein individuelles Design.

Schritt 5: Erweiterte Branding-Optionen

Keycloak unterstützt auch erweiterte Branding-Funktionen:

  1. Custom Scripts & JS – Füge eigene Interaktionen hinzu (z. B. Animationen, UX-Optimierungen).

  2. Dynamische Inhalte über Themes-Properties – Nutze Variablen für URLs, Texte oder Disclaimer.

  3. Mehrsprachigkeit (i18n) – Übersetze Beschriftungen in mehrere Sprachen über messages_de.properties etc.

  4. Responsive Design – Passe dein Layout für mobile Geräte an.

  5. Datenschutz & Impressum – Füge Links oder Hinweise im Footer hinzu – wichtig für DSGVO-konforme Logins.

Bonus: Corporate Branding über mehrere Realms

Wenn du mehrere Realms mit unterschiedlichen Mandanten nutzt (z. B. Stadtverwaltungen, Schulen oder Unternehmen), kannst du:

  • pro Realm ein eigenes Theme verwenden,
  • oder ein gemeinsames Grunddesign mit Variablen (z. B. Logo, Farbcode) anlegen.

Tipp: Nutze Templates mit Platzhaltern – so bleibt das Branding konsistent, aber flexibel.

Mit Keycloak lassen sich Login-Seiten vollständig im eigenen Corporate Design gestalten – vom Farbverlauf bis zum Logo. So entsteht ein professionelles, vertrauenswürdiges Erscheinungsbild, das perfekt zu deiner Organisation passt.

Ob für Kommunalportale, Intranet, Schulen oder Unternehmen – ein individuell gebrandetes Keycloak vermittelt nicht nur Stil, sondern auch Sicherheit und digitale Souveränität.

Ähnliche Beiträge