Créer un thème avec Tailwind

Apprenez à créer un thème en utilisant CSS Tailwind avec ACUL

Avant de commencer

Vous avez besoin de :

• Un tenant de développement Auth0 configuré avec la Connexion universelle et un domaine personnalisé.
• Une Application First Party.
• Activer l’Authentification Identifier First dans votre tenant Auth0.
• Node.js V22+
• L’outil Auth0 CLI authentifié auprès de votre tenant existant.
• D’examiner le guide de démarrage rapide ACUL

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 :

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>

2. 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.