Keycloak: Votre thème est prêt à être modifié

Cette documentation fait partie du guide Personnaliser l'apparence. Consultez le guide complet ici : Personnalisez facilement les pages de connexion, la console de compte et les e-mails de Keycloak sur Stackhero : définissez vos couleurs, votre logo, vos textes, et créez même des thèmes entièrement personnalisés grâce à l'éditeur en ligne intégré..

👋 Bienvenue sur la documentation de Stackhero !

Stackhero propose un service Keycloak cloud qui simplifie le déploiement d'un fournisseur d'identité prêt pour la production en seulement 2 minutes :

• Utilisateurs, realms et clients en nombre illimité
• Prise en charge de OpenID Connect, OAuth 2.0, SAML 2.0, connexion via réseaux sociaux, fédération LDAP et Active Directory
• Nom de domaine personnalisé avec HTTPS intégré pour un accès sécurisé (par exemple, https://login.votre-entreprise.com)
• Thèmes personnalisés : personnalisez facilement vos pages de connexion, la console de compte et les e-mails grâce à un éditeur en ligne inclus
• Serveur e-mail dédié avec SPF, DKIM et DMARC, pour que les confirmations de compte et réinitialisations de mot de passe soient gérées automatiquement
• Base de données PostgreSQL intégrée, avec la console d'administration accessible sur un port dédié et désactivable
• Mises à jour en un clic pour garder votre système à jour sans intervention manuelle

Consacrez votre temps au développement, pas à la configuration : vous pouvez tester la solution Keycloak cloud de Stackhero en moins de 5 minutes.

Ouvrez themes/ et vous trouverez un dossier default/. Il s'agit de votre thème actif, déjà utilisé par votre instance Keycloak. Il n'y a rien à sélectionner : modifiez simplement ses fichiers et voyez vos changements appliqués immédiatement.

Aucune connaissance préalable des thèmes Keycloak n'est requise. Chaque fichier contient déjà les paramètres courants à personnaliser, avec la valeur actuelle de Keycloak indiquée en exemple commenté. Pour modifier une valeur, retirez le caractère de commentaire, ajustez la valeur, puis enregistrez.

Si une ligne reste commentée, Keycloak utilise sa valeur par défaut. Cela garantit que votre service reste conforme au comportement standard de Keycloak, même après une mise à jour.

Mettre à jour votre logo

Ouvrez default/login/resources/img/. Vous y trouverez les deux images actuellement utilisées sur votre page de connexion. Téléversez votre propre logo en utilisant le même nom de fichier, keycloak-logo-text.svg, puis actualisez la page de connexion avec Ctrl+F5 (Cmd+Shift+R sur macOS).

C'est tout ce qu'il y a à faire. Inutile de modifier d'autres fichiers ou de redémarrer votre service : la mise à jour est appliquée dès l'enregistrement. Pour changer l'image de fond, remplacez keycloak-bg-darken.svg dans le même dossier.

Si vous souhaitez utiliser d'autres noms de fichiers, vous pouvez modifier les références dans default/login/resources/css/stackhero.css dans la section "Your logo".

Définir vos couleurs

Dans stackhero.css, vous trouverez des variables déjà renseignées avec leurs valeurs actuelles :

:root {
  /* ---------- Colors ---------- */
  /* The buttons */
  /* --pf-v5-global--primary-color--100: #06c; */
  /* The buttons, while hovered */
  /* --pf-v5-global--primary-color--200: #004080; */
  /* The links */
  /* --pf-v5-global--link--Color: #06c; */
  /* The colored line on top of the login box */
  /* --keycloak-card-top-color: #06c; */

Pour appliquer une modification, retirez les marques de commentaire, définissez votre couleur, enregistrez et rechargez la page. C'est tout.

Pendant vos modifications : Votre navigateur met en cache le CSS, les images et les scripts du thème pendant une heure. Lors de vos tests, rechargez toujours avec Ctrl+F5 pour voir vos derniers changements. Vos visiteurs verront la mise à jour dans l'heure qui suit.

Vous avez un contrôle total : le fichier est du CSS standard et se charge en dernier, ce qui vous permet de surcharger n'importe quel style. Utilisez les DevTools de votre navigateur (F12) pour inspecter les éléments. Keycloak 26 utilise le PatternFly design system, la plupart des variables de couleur sont nommées --pf-v5-global--* et peuvent être redéfinies dans :root.

Définir le nom de votre entreprise

Aucune modification de thème n'est nécessaire pour cela. Dans la console d'administration, ouvrez Realm settings > General et renseignez le Display name. Ce nom s'affichera sur les pages de connexion et dans les e-mails.

Modifier les textes, en plusieurs langues

Vous pouvez modifier les textes sans toucher au CSS ou au HTML. Dans default/login/messages/messages_en.properties, vous trouverez tous les textes du formulaire de connexion avec leur libellé par défaut. Pour modifier une ligne, retirez le #, saisissez votre texte, puis enregistrez :

loginAccountTitle=Sign in to Acme
doLogIn=Sign in
doForgotPassword=I forgot my password

Ajoutez des fichiers comme messages_fr.properties pour le français ou messages_de.properties pour l'allemand, puis activez ces langues dans la console d'administration, section Realm settings > Localization.

Astuce : L'onglet Localization propose aussi une section Realm overrides qui permet de modifier les textes directement dans la console, sans éditer de fichier ni redémarrer. Utilisez la méthode qui correspond le mieux à votre organisation.

Personnaliser vos e-mails

Keycloak envoie des e-mails pour la confirmation d'adresse, la réinitialisation de mot de passe et les invitations utilisateurs. Dans default/email/messages/messages_en.properties, vous trouverez les sujets et messages standards prêts à être adaptés :

emailVerificationSubject=Confirm your Acme account
passwordResetSubject=Reset your Acme password

Lorsque vous modifiez le contenu des e-mails, gardez à l'esprit :

• Conservez les placeholders {0}, {1}, {2} (Keycloak les remplacera par le lien, le nom affiché et le délai).
• Pour échapper une apostrophe, écrivez-la en double (don''t).

Pour personnaliser le HTML des e-mails, copiez le modèle souhaité depuis le Keycloak base email theme dans default/email/html/, puis modifiez votre copie.

Stackhero configure l'envoi des e-mails pour vous avec SPF, DKIM et DMARC déjà en place. Configurez-le dans Realm settings > Email en utilisant l'hôte et le port indiqués sur la page de votre service.

Si vous devez réinitialiser votre thème

En cas de problème, vous pouvez supprimer entièrement le dossier default puis redémarrer votre service. Stackhero recréera un thème par défaut, restaurant ainsi l'apparence standard de Keycloak.

Vos realms, utilisateurs et clients sont stockés dans votre base de données et ne sont pas affectés.