Passer au contenu principal

Avant de commencer

Vous avez besoin de :
La Connexion universelle fournit un certain nombre d’invites, ou d’étapes dans le processus d’authentification, chaque étape inclut 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 de login-id
Vous pouvez appliquer un thème à cet écran de connexion en utilisant Tailwind CSS v4. Toutes les personnalisations de thème et de branding se trouvent dans le répertoire src/index.css du projet ACUL.
  1. Utilisez l’outil Auth0 CLI pour créer un projet ACUL avec les écrans pour appliquer un nouveau thème.
auth0 acul init <Your-App-Name>
  1. Modifiez le fichier CSS src/index.css.
/* In src/index.css */
:root {
  /* Change these CSS variables to match your brand's primary color */
  --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 sur le style par défaut de la Connexion universelle et sont automatiquement remplacées par le thème de Branding défini dans votre tenant lors de l’exécution. Pour en savoir plus, lisez le fichier src/utils/theme/themeEngine.ts dans le répertoire de votre projet.