Personnaliser le style et les thèmes avec Auth0 Universal Components

Personnalisez le système de conception d’Auth0 Universal Components à l’aide de Tailwind CSS, de variables CSS et de préréglages de thème intégrés.

Auth0 Universal Components est actuellement en accès anticipé. En l’utilisant, vous acceptez les conditions applicables de l’essai gratuit dans le Master Subscription Agreement d’Okta. Pour en savoir plus, consultez les phases de lancement des produits.

Auth0 Universal Components repose sur un système de conception flexible qui utilise Tailwind CSS et les primitives de Radix UI. Le style est géré par Auth0ComponentProvider, ce qui vous permet de choisir entre des préréglages de haut niveau ou des surcharges précises au moyen de variables CSS.

Cette architecture garantit que vos flux d’identité aient l’apparence et le comportement d’éléments natifs de votre application.

React

​

Démarrer

1. Importez la feuille de style.

import "@auth0/universal-components-react/styles";

Utilisateurs de Tailwind v4 : ajoutez @import "@auth0/universal-components-react/tailwind" à votre fichier CSS.

2. Ajoutez la couleur de votre marque.

:root {
  --primary: #4f46e5; /* couleur de votre marque */
  --primary-foreground: #ffffff; /* texte sur les boutons */
}

Terminé. Tous les boutons, liens et états actifs reflètent maintenant votre marque.

---

​

Préréglages de thème

Transmettez themeSettings à Auth0ComponentProvider pour basculer entre les thèmes intégrés.

App.tsx

<Auth0ComponentProvider
  themeSettings={{
    mode: "light", // 'light' | 'dark' (clair | sombre)
    theme: "default", // 'default' | 'minimal' | 'rounded' (défaut | minimal | arrondi)
  }}
>
  <App />
</Auth0ComponentProvider>

Préréglage	Description
default	Style Auth0 standard avec des ombres et des bordures équilibrées
minimal	Impact visuel réduit avec moins d’ombres et des bordures plus discrètes
rounded	Coins plus arrondis pour une apparence plus douce

---

​

Examiner les variables CSS

Toutes les propriétés visuelles sont définies par des propriétés personnalisées CSS. Remplacez-les dans votre feuille de style ou via la prop themeSettings.variables.

Couleurs (claires)

:root {
  /* Marque - les variables les plus importantes */
  --primary: oklch(37% 0 0);              /* boutons, liens, états actifs */
  --primary-foreground: oklch(100% 0 0);  /* texte sur les surfaces primaires */

/_ Surfaces _/
--background: oklch(100% 0 0); /_ arrière-plan de la page _/
--foreground: oklch(9% 0 0); /_ texte par défaut _/
--card: oklch(100% 0 0); /_ arrière-plan de la carte _/
--card-foreground: oklch(0% 0 0); /_ texte à l'intérieur des cartes _/
--popover: oklch(100% 0 0); /_ arrière-plan du menu déroulant/dialogue _/
--popover-foreground: oklch(9% 0 0); /_ texte à l'intérieur des popovers _/
--input: oklch(100% 0 0); /_ arrière-plan du champ de saisie _/

/_ Secondaire et atténué _/
--secondary: oklch(96% 0 0);
--secondary-foreground: oklch(100% 0 0);
--muted: oklch(96% 0 0); /_ arrière-plans désactivés _/
--muted-foreground: oklch(45% 0 0); /_ texte d'espace réservé _/

/_ Accent et destructif _/
--accent: oklch(97% 0 0); /_ surlignages au survol _/
--accent-foreground: oklch(9% 0 0);
--destructive: oklch(93% 0.03 17); /_ états d'erreur _/
--destructive-foreground: oklch(36% 0.14 17);

/_ Bordures _/
--border: oklch(89% 0 0);
--ring: oklch(89% 0 0); /_ anneau de focus _/
}

Couleurs (thème sombre)

.dark {
  /* Marque */
  --primary: oklch(70% 0.15 250);         /* plus lumineux pour les arrière-plans sombres */
  --primary-foreground: oklch(10% 0 0);

  /* Surfaces */
  --background: oklch(12% 0 0);
  --foreground: oklch(95% 0 0);
  --card: oklch(15% 0 0);
  --card-foreground: oklch(95% 0 0);
  --popover: oklch(15% 0 0);
  --popover-foreground: oklch(95% 0 0);
  --input: oklch(18% 0 0);

  /* Secondaire et atténué */
  --secondary: oklch(20% 0 0);
  --secondary-foreground: oklch(95% 0 0);
  --muted: oklch(20% 0 0);
  --muted-foreground: oklch(60% 0 0);

  /* Accent et destructif */
  --accent: oklch(25% 0 0);
  --accent-foreground: oklch(95% 0 0);
  --destructive: oklch(30% 0.15 17);
  --destructive-foreground: oklch(95% 0.05 17);

  /* Bordures */
  --border: oklch(25% 0 0);
  --ring: oklch(35% 0 0);
}

Rayon de la bordure

:root {
  /* Commun - ajustez ces valeurs pour l'apparence générale */
  --radius-sm:  4px;    /* étiquettes, puces */
  --radius-md:  6px;    /* petits éléments */
  --radius-lg:  10px;   /* boutons, champs */
  --radius-xl:  12px;   /* cartes */
  --radius-2xl: 16px;   /* fenêtres modales, grands panneaux */

/_ Granularité fine (rarement nécessaire) _/
--radius-xs: 2px;
--radius-3xl: 20px;
--radius-4xl: 24px;
--radius-5xl: 32px;
}

Typographie

:root {
  --font-size-page-header:      2.25rem;   /* 36px - titre principal */
  --font-size-heading:          1.5rem;    /* 24px - titres de section */
  --font-size-title:            1.25rem;   /* 20px - titres de carte */
  --font-size-subtitle:         1.125rem;  /* 18px - titres secondaires */
  --font-size-body:             1rem;      /* 16px - texte courant */
  --font-size-paragraph:        0.875rem;  /* 14px - descriptions */
  --font-size-label:            0.875rem;  /* 14px - étiquettes de formulaire */
  --font-size-page-description: 0.875rem;  /* 14px - sous-titres */
}

---

​

Composants de style

Chaque composant accepte une prop styling pour des substitutions ciblées sans affecter les styles globaux.

<SsoProviderTable
  styling={{
    variables: {
      common: {
        "--primary": "#059669", // remplacer uniquement pour ce composant
      },
      light: { "--card": "#f8fafc" },
      dark: { "--card": "#1e293b" },
    },
    classes: {
      "SsoProviderTable-header": "shadow-lg",
      "SsoProviderTable-table": "rounded-xl",
    },
  }}
/>

Quand utiliser :

• variables - redéfinitions des propriétés personnalisées CSS propres au composant
• classes - classes Tailwind ou personnalisées appliquées à des parties précises du composant

Classes cibles disponibles par composant

Chaque composant expose des classes cibles pour ses principales sections :

SsoProviderCreate

• SsoProviderCreate-header, SsoProviderCreate-wizard
• ProviderSelect-root, ProviderDetails-root, ProviderConfigure-root

SsoProviderTable

• SsoProviderTable-header, SsoProviderTable-table, SsoProviderTable-row

SsoProviderEdit

• SsoProviderEdit-header, SsoProviderEdit-tabs
• SsoProviderEdit-ssoTab, SsoProviderEdit-provisioningTab, SsoProviderEdit-domainsTab

DomainTable

• DomainTable-header, DomainTable-table
• DomainTable-createModal, DomainTable-configureModal, DomainTable-deleteModal

OrganizationDetailsEdit

• OrganizationDetailsEdit-header, OrganizationDetailsEdit-form, OrganizationDetailsEdit-actions

---

​

Personnalisations courantes

​

Couleurs de marque (Hex)

Convertissez la couleur hexadécimale de votre marque au format utilisé en CSS :

:root {
  /* Utilisation directe de la valeur hexadécimale */
  --primary: #4f46e5;
  --primary-foreground: #ffffff;

  /* Ou oklch pour une meilleure manipulation des couleurs */
  --primary: oklch(50% 0.2 265); /* violet */
}

​

Coins arrondis

Pour une esthétique plus arrondie sur l’ensemble des composants :

:root {
  --radius-lg: 16px; /* boutons, champs de saisie */
  --radius-xl: 20px; /* cartes */
  --radius-2xl: 24px; /* fenêtres modales */
}

​

Typographie compacte

Pour les interfaces plus denses :

:root {
  --font-size-page-header: 1.75rem;
  --font-size-heading: 1.25rem;
  --font-size-title: 1rem;
  --font-size-body: 0.875rem;
}

---

​

Mode sombre

Les composants répondent automatiquement au paramètre mode dans themeSettings. Pour synchroniser avec le mode sombre de votre application :

function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    <Auth0ComponentProvider
      themeSettings={{
        mode: isDark ? "dark" : "light",
      }}
    >
      <YourApp />
    </Auth0ComponentProvider>
  );
}

Ou utiliser la préférence système :

const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

<Auth0ComponentProvider
  themeSettings={{ mode: prefersDark ? 'dark' : 'light' }}
>

Next.js

​

Premiers pas

1. Importez la feuille de style.

Dans votre fichier de disposition racine :

layout.tsx

import { Auth0ComponentProvider } from "@auth0/universal-components-react/rwa";
import "@auth0/universal-components-react/styles";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Auth0ComponentProvider
          mode="proxy"
          domain={process.env.NEXT_PUBLIC_AUTH0_DOMAIN}
          proxyConfig={{ baseUrl: "/api/auth" }}
        >
          {children}
        </Auth0ComponentProvider>
      </body>
    </html>
  );
}

Utilisateurs de Tailwind v4 : Ajoutez @import "@auth0/universal-components-react/tailwind" à votre fichier CSS.

Utilisateurs de Shadcn : Aucun import n’est nécessaire ; les styles sont déjà inclus dans votre build Tailwind.

2. Ajoutez la couleur de votre marque.

:root {
  --primary: #4f46e5; /* couleur de votre marque */
  --primary-foreground: #ffffff; /* texte sur les boutons */
}

Terminé. Tous les boutons, liens et états actifs utilisent désormais votre marque.

---

​

Préréglages de thème

Passez themeSettings à Auth0ComponentProvider pour alterner entre les thèmes intégrés.

layout.tsx

<Auth0ComponentProvider
  mode="proxy"
  domain="your-tenant.auth0.com"
  proxyConfig={{ baseUrl: "/api/auth" }}
  themeSettings={{
    mode: "light", // 'light' | 'dark'
    theme: "default", // 'default' | 'minimal' | 'rounded'
  }}
>
  {/* Les composants de votre application */}
</Auth0ComponentProvider>

Préréglage	Description
default	Apparence standard d’Auth0 avec des ombres et des bordures bien équilibrées
minimal	Poids visuel réduit, avec moins d’ombres et des bordures plus légères
rounded	Coins plus arrondis pour une apparence plus douce

---

​

Examiner les variables CSS

Toutes les propriétés visuelles sont définies par des propriétés personnalisées CSS. Remplacez-les dans votre feuille de style ou via la prop themeSettings.variables.

Couleurs (claires)

:root {
  /* Marque - les variables les plus importantes */
  --primary: oklch(37% 0 0);              /* boutons, liens, états actifs */
  --primary-foreground: oklch(100% 0 0);  /* texte sur les surfaces primaires */

/_ Surfaces _/
--background: oklch(100% 0 0); /_ arrière-plan de la page _/
--foreground: oklch(9% 0 0); /_ texte par défaut _/
--card: oklch(100% 0 0); /_ arrière-plan de la carte _/
--card-foreground: oklch(0% 0 0); /_ texte dans les cartes _/
--popover: oklch(100% 0 0); /_ arrière-plan du menu déroulant/boîte de dialogue _/
--popover-foreground: oklch(9% 0 0); /_ texte dans les fenêtres contextuelles _/
--input: oklch(100% 0 0); /_ arrière-plan du champ de saisie _/

/_ Secondaire et atténué _/
--secondary: oklch(96% 0 0);
--secondary-foreground: oklch(100% 0 0);
--muted: oklch(96% 0 0); /_ arrière-plans désactivés _/
--muted-foreground: oklch(45% 0 0); /_ texte d'espace réservé _/

/_ Accent et destructif _/
--accent: oklch(97% 0 0); /_ mises en évidence au survol _/
--accent-foreground: oklch(9% 0 0);
--destructive: oklch(93% 0.03 17); /_ états d'erreur _/
--destructive-foreground: oklch(36% 0.14 17);

/_ Bordures _/
--border: oklch(89% 0 0);
--ring: oklch(89% 0 0); /_ anneau de focus _/
}

Couleurs (foncées)

.dark {
  /* Marque */
  --primary: oklch(70% 0.15 250);         /* plus lumineux pour les arrière-plans sombres */
  --primary-foreground: oklch(10% 0 0);

  /* Surfaces */
  --background: oklch(12% 0 0);
  --foreground: oklch(95% 0 0);
  --card: oklch(15% 0 0);
  --card-foreground: oklch(95% 0 0);
  --popover: oklch(15% 0 0);
  --popover-foreground: oklch(95% 0 0);
  --input: oklch(18% 0 0);

  /* Secondaire et atténué */
  --secondary: oklch(20% 0 0);
  --secondary-foreground: oklch(95% 0 0);
  --muted: oklch(20% 0 0);
  --muted-foreground: oklch(60% 0 0);

  /* Accent et destructif */
  --accent: oklch(25% 0 0);
  --accent-foreground: oklch(95% 0 0);
  --destructive: oklch(30% 0.15 17);
  --destructive-foreground: oklch(95% 0.05 17);

  /* Bordures */
  --border: oklch(25% 0 0);
  --ring: oklch(35% 0 0);
}

Rayon des bordures

:root {
  /* Commun - ajustez ces valeurs pour l'apparence générale */
  --radius-sm:  4px;    /* étiquettes, puces */
  --radius-md:  6px;    /* petits éléments */
  --radius-lg:  10px;   /* boutons, champs */
  --radius-xl:  12px;   /* cartes */
  --radius-2xl: 16px;   /* fenêtres modales, grands panneaux */

/_ Granularité fine (rarement nécessaire) _/
--radius-xs: 2px;
--radius-3xl: 20px;
--radius-4xl: 24px;
--radius-5xl: 32px;
}

Typographie

:root {
  --font-size-page-header:      2.25rem;   /* 36px - titre principal */
  --font-size-heading:          1.5rem;    /* 24px - titres de section */
  --font-size-title:            1.25rem;   /* 20px - titres de carte */
  --font-size-subtitle:         1.125rem;  /* 18px - titres secondaires */
  --font-size-body:             1rem;      /* 16px - texte courant */
  --font-size-paragraph:        0.875rem;  /* 14px - descriptions */
  --font-size-label:            0.875rem;  /* 14px - étiquettes de formulaire */
  --font-size-page-description: 0.875rem;  /* 14px - sous-titres */
}

---

​

Composants de style

Chaque composant accepte une prop styling pour des substitutions ciblées sans affecter les styles globaux.

layout.tsx

<SsoProviderTable
  styling={{
    variables: {
      common: {
        "--primary": "#059669", // remplacer uniquement pour ce composant
      },
      light: { "--card": "#f8fafc" },
      dark: { "--card": "#1e293b" },
    },
    classes: {
      "SsoProviderTable-header": "shadow-lg",
      "SsoProviderTable-table": "rounded-xl",
    },
  }}
/>

Quand utiliser :

• variables - redéfinitions de propriétés CSS personnalisées propres au composant
• classes - classes Tailwind ou personnalisées appliquées à certaines parties du composant

Classes cibles disponibles par composant

Chaque composant expose des sélecteurs de classe pour ses sections principales :

SsoProviderCreate

• SsoProviderCreate-header, SsoProviderCreate-wizard
• ProviderSelect-root, ProviderDetails-root, ProviderConfigure-root

SsoProviderTable

• SsoProviderTable-header, SsoProviderTable-table, SsoProviderTable-row

SsoProviderEdit

• SsoProviderEdit-header, SsoProviderEdit-tabs
• SsoProviderEdit-ssoTab, SsoProviderEdit-provisioningTab, SsoProviderEdit-domainsTab

DomainTable

• DomainTable-header, DomainTable-table
• DomainTable-createModal, DomainTable-configureModal, DomainTable-deleteModal

OrganizationDetailsEdit

• OrganizationDetailsEdit-header, OrganizationDetailsEdit-form, OrganizationDetailsEdit-actions

---

​

Personnalisations courantes

​

Couleurs de marque (Hex)

Convertissez la couleur hexadécimale de votre marque au format utilisé en CSS :

:root {
  /* Utilisation directe de la valeur hexadécimale */
  --primary: #4f46e5;
  --primary-foreground: #ffffff;

  /* Ou oklch pour une meilleure manipulation des couleurs */
  --primary: oklch(50% 0.2 265); /* violet */
}

​

Coins arrondis

Pour un style plus arrondi sur l’ensemble des composants :

:root {
  --radius-lg: 16px; /* boutons, champs de saisie */
  --radius-xl: 20px; /* cartes */
  --radius-2xl: 24px; /* fenêtres modales */
}

​

Typographie compacte

Pour les interfaces plus denses :

:root {
  --font-size-page-header: 1.75rem;
  --font-size-heading: 1.25rem;
  --font-size-title: 1rem;
  --font-size-body: 0.875rem;
}

---

​

Mode sombre

Les composants répondent automatiquement au paramètre mode dans themeSettings. Pour synchroniser avec le mode sombre de votre application :

function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    <Auth0ComponentProvider
      mode="proxy"
      domain="your-tenant.auth0.com"
      proxyConfig={{ baseUrl: "/api/auth" }}
      themeSettings={{
        mode: isDark ? "dark" : "light",
      }}
    >
      <YourApp />
    </Auth0ComponentProvider>
  );
}

Ou utiliser la préférence système :

const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

<Auth0ComponentProvider
  mode="proxy"
  domain="your-tenant.auth0.com"
  proxyConfig={{ baseUrl: "/api/auth" }}
  themeSettings={{ mode: prefersDark ? 'dark' : 'light' }}
>

shadcn

​

Premiers pas

1. Aucun import de style n’est nécessaire.

Avec Shadcn, les styles sont déjà inclus dans votre build Tailwind. Aucune importation supplémentaire n’est nécessaire.

Si vous utilisez Tailwind v4, ajoutez @import "@auth0/universal-components-react/tailwind" dans votre fichier CSS.

2. Ajoutez votre couleur de marque.

:root {
  --primary: #4f46e5; /* couleur de votre marque */
  --primary-foreground: #ffffff; /* texte sur les boutons */
}

Terminé. Tous les boutons, liens et états actifs utilisent désormais votre marque.

---

​

Préréglages de thème

Passez themeSettings à Auth0ComponentProvider pour alterner entre les thèmes intégrés.

App.tsx

<Auth0ComponentProvider
  themeSettings={{
    mode: "light", // 'light' | 'dark'
    theme: "default", // 'default' | 'minimal' | 'rounded'
  }}
>
  <App />
</Auth0ComponentProvider>

Préréglage	Description
default	Apparence Auth0 standard avec des ombres et des bordures équilibrées
minimal	Impact visuel réduit avec moins d’ombres et des bordures plus légères
rounded	Rayons de bordure plus grands pour une apparence plus douce

---

​

Examiner les variables CSS

Toutes les propriétés visuelles sont définies par des propriétés personnalisées CSS. Remplacez-les dans votre feuille de style ou via la prop themeSettings.variables.

Couleurs (claires)

:root {
  /* Marque - les variables les plus importantes */
  --primary: oklch(37% 0 0);              /* boutons, liens, états actifs */
  --primary-foreground: oklch(100% 0 0);  /* texte sur les surfaces primaires */

/_ Surfaces _/
--background: oklch(100% 0 0); /_ arrière-plan de la page _/
--foreground: oklch(9% 0 0); /_ texte par défaut _/
--card: oklch(100% 0 0); /_ arrière-plan de la carte _/
--card-foreground: oklch(0% 0 0); /_ texte dans les cartes _/
--popover: oklch(100% 0 0); /_ arrière-plan du menu déroulant/dialogue _/
--popover-foreground: oklch(9% 0 0); /_ texte dans les fenêtres contextuelles _/
--input: oklch(100% 0 0); /_ arrière-plan du champ de saisie _/

/_ Secondaire et atténué _/
--secondary: oklch(96% 0 0);
--secondary-foreground: oklch(100% 0 0);
--muted: oklch(96% 0 0); /_ arrière-plans désactivés _/
--muted-foreground: oklch(45% 0 0); /_ texte d'espace réservé _/

/_ Accentuation et destructif _/
--accent: oklch(97% 0 0); /_ surlignages au survol _/
--accent-foreground: oklch(9% 0 0);
--destructive: oklch(93% 0.03 17); /_ états d'erreur _/
--destructive-foreground: oklch(36% 0.14 17);

/_ Bordures _/
--border: oklch(89% 0 0);
--ring: oklch(89% 0 0); /_ anneau de focus _/
}

Couleurs (mode sombre)

.dark {
  /* Marque */
  --primary: oklch(70% 0.15 250);         /* plus lumineux pour les arrière-plans sombres */
  --primary-foreground: oklch(10% 0 0);

  /* Surfaces */
  --background: oklch(12% 0 0);
  --foreground: oklch(95% 0 0);
  --card: oklch(15% 0 0);
  --card-foreground: oklch(95% 0 0);
  --popover: oklch(15% 0 0);
  --popover-foreground: oklch(95% 0 0);
  --input: oklch(18% 0 0);

  /* Secondaire et atténué */
  --secondary: oklch(20% 0 0);
  --secondary-foreground: oklch(95% 0 0);
  --muted: oklch(20% 0 0);
  --muted-foreground: oklch(60% 0 0);

  /* Accent et destructif */
  --accent: oklch(25% 0 0);
  --accent-foreground: oklch(95% 0 0);
  --destructive: oklch(30% 0.15 17);
  --destructive-foreground: oklch(95% 0.05 17);

  /* Bordures */
  --border: oklch(25% 0 0);
  --ring: oklch(35% 0 0);
}

Rayon de la bordure

:root {
  /* Commun - ajustez ces valeurs pour l'apparence générale */
  --radius-sm:  4px;    /* étiquettes, puces */
  --radius-md:  6px;    /* petits éléments */
  --radius-lg:  10px;   /* boutons, champs */
  --radius-xl:  12px;   /* cartes */
  --radius-2xl: 16px;   /* fenêtres modales, grands panneaux */

/_ Granularité fine (rarement nécessaire) _/
--radius-xs: 2px;
--radius-3xl: 20px;
--radius-4xl: 24px;
--radius-5xl: 32px;
}

Typographie

:root {
  --font-size-page-header:      2.25rem;   /* 36px - titre principal */
  --font-size-heading:          1.5rem;    /* 24px - titres de section */
  --font-size-title:            1.25rem;   /* 20px - titres de carte */
  --font-size-subtitle:         1.125rem;  /* 18px - titres secondaires */
  --font-size-body:             1rem;      /* 16px - texte courant */
  --font-size-paragraph:        0.875rem;  /* 14px - descriptions */
  --font-size-label:            0.875rem;  /* 14px - étiquettes de formulaire */
  --font-size-page-description: 0.875rem;  /* 14px - sous-titres */
}

---

​

Composants de style

Chaque composant accepte une prop styling pour des substitutions ciblées sans affecter les styles globaux.

<SsoProviderTable
  styling={{
    variables: {
      common: {
        "--primary": "#059669", // remplacer uniquement pour ce composant
      },
      light: { "--card": "#f8fafc" },
      dark: { "--card": "#1e293b" },
    },
    classes: {
      "SsoProviderTable-header": "shadow-lg",
      "SsoProviderTable-table": "rounded-xl",
    },
  }}
/>

Quand utiliser :

• variables - redéfinitions des propriétés CSS personnalisées propres au composant
• classes - classes Tailwind ou personnalisées appliquées à des parties spécifiques du composant

Classes cibles disponibles par composant

Chaque composant expose des classes cibles pour ses principales sections :

SsoProviderCreate

• SsoProviderCreate-header, SsoProviderCreate-wizard
• ProviderSelect-root, ProviderDetails-root, ProviderConfigure-root

SsoProviderTable

• SsoProviderTable-header, SsoProviderTable-table, SsoProviderTable-row

SsoProviderEdit

• SsoProviderEdit-header, SsoProviderEdit-tabs
• SsoProviderEdit-ssoTab, SsoProviderEdit-provisioningTab, SsoProviderEdit-domainsTab

DomainTable

• DomainTable-header, DomainTable-table
• DomainTable-createModal, DomainTable-configureModal, DomainTable-deleteModal

OrganizationDetailsEdit

• OrganizationDetailsEdit-header, OrganizationDetailsEdit-form, OrganizationDetailsEdit-actions

---

​

Personnalisations courantes

​

Couleurs de marque (Hex)

Convertissez la couleur hexadécimale de votre marque au format utilisé en CSS :

:root {
  /* Utilisation directe de la valeur hexadécimale */
  --primary: #4f46e5;
  --primary-foreground: #ffffff;

  /* Ou oklch pour une meilleure manipulation des couleurs */
  --primary: oklch(50% 0.2 265); /* violet */
}

​

Coins arrondis

Pour un style plus arrondi sur l’ensemble des composants :

:root {
  --radius-lg: 16px; /* boutons, champs de saisie */
  --radius-xl: 20px; /* cartes */
  --radius-2xl: 24px; /* fenêtres modales */
}

​

Typographie compacte

Pour les interfaces plus denses :

:root {
  --font-size-page-header: 1.75rem;
  --font-size-heading: 1.25rem;
  --font-size-title: 1rem;
  --font-size-body: 0.875rem;
}

---

​

Mode sombre

Les composants répondent automatiquement au paramètre mode dans themeSettings. Pour synchroniser avec le mode sombre de votre application :

function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    <Auth0ComponentProvider
      themeSettings={{
        mode: isDark ? "dark" : "light",
      }}
    >
      <YourApp />
    </Auth0ComponentProvider>
  );
}

Ou utiliser la préférence système :

const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

<Auth0ComponentProvider
  themeSettings={{ mode: prefersDark ? 'dark' : 'light' }}
>