Passer au contenu principal

Avant de commencer

Vous aurez besoin de :
Universal Login propose un certain nombre de messages d’invite (prompts), ou d’étapes du processus d’authentification, et chaque étape comprend au moins un écran. Vous pouvez utiliser ACUL pour appliquer un thème à tous vos écrans personnalisés. Par exemple :
capture d'écran de référence login-id
Vous pouvez appliquer un thème à cet écran de connexion à l’aide de Tailwind CSS v4. Toutes les personnalisations de thème et de branding se trouvent dans le fichier src/index.css du projet ACUL.
  1. Utilisez l’outil Auth0 CLI pour créer un projet ACUL contenant les écrans auxquels appliquer un nouveau thème.
auth0 acul init <Your-App-Name>
  1. Modifiez le fichier CSS src/index.css.
/* In src/index.css */
:root {
  /* Modifiez ces variables CSS pour qu'elles correspondent à la couleur principale de votre marque */
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);

  /* Override the theme variables to reference your custom color*/  
  --color-primary-button: var(--ul-theme-color-primary-button);

  /* You can also override specific component colors directly */
  --color-header: var(--primary-foreground);
  --color-body-text: #000000;
  --color-widget-bg: white;
  --color-widget-border: transparent;
  /* ... and many more */
}
Les variables CSS dans le bloc @theme inline sont utilisées par les composants de base. Les variables CSS préfixées par --ul-theme- sont définies selon le style par défaut d’Universal Login et sont automatiquement remplacées à l’exécution par le thème Branding configuré dans votre tenant. Pour en savoir plus, consultez le fichier src/utils/theme/themeEngine.ts dans le répertoire de votre projet.