Thème Keycloak — Homelab Cyberpunk

Thème clair et sombre cyberpunk avec support :

• Connexion classique (identifiant + mot de passe)
• Clé de sécurité WebAuthn / Passkey (passwordless)
• TOTP / Code OTP (second facteur)
• Réinitialisation de mot de passe
• Session expirée

---

Installation

1. Copier le thème

Copie le dossier homelab/ dans le répertoire themes/ de ton installation Keycloak :

cp -r homelab/ /opt/keycloak/themes/

Docker / Podman — monte le dossier en volume dans ton compose :

volumes:
  - ./homelab:/opt/keycloak/themes/homelab:ro

2. Activer le thème dans Keycloak

1. Connecte-toi à la console d'administration Keycloak
2. Sélectionne ton realm (ex. master ou ton realm homelab)
3. Va dans Realm Settings → Themes
4. Dans le champ Login theme, sélectionne homelab
5. Clique sur Save

3. Activer WebAuthn dans Keycloak

Pour que la clé de sécurité fonctionne :

1. Va dans Authentication → Flows
2. Duplique le flow browser et nomme-le browser-webauthn
3. Ajoute l'exécution WebAuthn Authenticator (ou WebAuthn Passwordless)
4. Dans Authentication → Required Actions, active Webauthn Register
5. Dans Realm Settings → Security Defenses, vérifie que le domaine est correct
6. Va dans Authentication → WebAuthn Policy (ou Passwordless Policy) et configure :
   • Relying Party Name : ton domaine (ex. homelab.local)
   • User Verification : preferred ou required
7. Assigne le flow browser-webauthn dans Realm Settings → Flows → Browser Flow

4. Tester

Ouvre l'URL de ton realm :

https://keycloak.qpixel.ovh/realms/Principal/account

---

Personnalisation

Changer la couleur d'accent (le cyan)

Dans resources/css/login.css, modifie les variables CSS au début :

:root {
  --accent: #00d2aa;          /* Couleur principale */
  --accent-dim: rgba(0,210,170,0.4);
  --accent-faint: rgba(0,210,170,0.12);
  --accent-muted: rgba(0,210,170,0.25);
}

Exemples de palettes alternatives :

• Violet : #a855f7 / rgba(168,85,247,...)
• Rouge : #ff4d6a / rgba(255,77,106,...)
• Bleu : #38bdf8 / rgba(56,189,248,...)

Dans resources/js/particles.js, change aussi les occurrences de rgba(0,210,170,...).

Remplacer les particules par une image de fond

Dans resources/css/login.css, ajoute à la fin :

body {
  background-image: url('/path/to/your/image.jpg');
  background-size: cover;
  background-position: center;
}
#particle-canvas { display: none; }

Modifier le titre

Dans login.ftl, cherche :

<div class="kc-title">Accès</div>
<div class="kc-subtitle">HOMELAB // AUTHENTICATION NODE</div>

---

Structure des fichiers

homelab/
└── login/
    ├── theme.properties          # Config du thème
    ├── login.ftl                 # Page de connexion principale
    ├── login-otp.ftl             # Page code TOTP / OTP
    ├── login-reset-password.ftl  # Réinitialisation mot de passe
    ├── login-page-expired.ftl    # Session expirée
    ├── webauthn-authenticate.ftl # Page dédiée WebAuthn
    └── resources/
        ├── css/
        │   └── login.css         # Styles cyberpunk
        └── js/
            └── particles.js      # Animation particules

---

Versions Keycloak supportées

Testé pour Keycloak 21+ (basé sur Quarkus). Pour Keycloak < 17 (WildFly), le chemin des thèmes est standalone/deployments/ au lieu de themes/.