> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

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

> Personnalisez Auth0 Universal Components à l’aide de variables CSS, de Tailwind v4 et de préréglages de thèmes intégrés.

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "bêta",
    "ea": "Accès anticipé"
  };
  const stageText = stageTextMap[stage] || "une phase de lancement du produit";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>Cette fonctionnalité est offerte avec les forfaits {linkify(`${plans}`, "https://auth0.com/pricing")}. </>}
            {contact && "Pour y participer, communiquez avec " + contact + ". "}
            {terms && <>En utilisant cette fonctionnalité, vous acceptez les conditions applicables de l’essai gratuit énoncées dans le {linkify("Master Subscription Agreement", "https://www.okta.com/legal")} d’Okta.</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>La fonctionnalité {feature} est en {linkify(stageText, prsLink)}.</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

<ReleaseStageNotice feature="Auth0 Universal Components" stage="ea" terms="true" contact="Auth0 Support" />

Auth0 Universal Components repose sur un système de conception basé sur Tailwind CSS et les primitives de Radix UI. Personnalisez votre image de marque en définissant des propriétés CSS personnalisées que les composants lisent directement.

Choisissez votre configuration CSS ci-dessous.

<Tabs>
  <Tab title="CSS simple">
    ## Configuration

    Faites l'importation de la feuille de styles précompilée dans le point d'entrée de votre application :

    ```tsx theme={null}
    import "@auth0/universal-components-react/styles";
    ```

    Remplacez ensuite les jetons dans votre CSS :

    ```css theme={null}
    :root {
      --auth0-primary: #4f46e5;            /* la couleur de votre image de marque */
      --auth0-primary-foreground: #ffffff; /* texte sur les surfaces principales */
    }
    ```

    Toutes les couleurs des composants découlent de ces deux jetons. Ajoutez-en d'autres au besoin à partir de la [référence des variables CSS](#css-variables).

    <Callout icon="triangle-exclamation" color="#F59E0B" iconType="regular">
      En mode CSS standard, définir `--primary` ou `--color-primary` n’a aucun effet. La feuille de style compilée utilise directement les variables `--auth0-*`.
    </Callout>

    ***

    ## Préréglages de thème

    Passez `themeSettings` à `Auth0ComponentProvider` pour basculer d'une variante visuelle intégrée à l'autre.

    ```tsx theme={null}
    <Auth0ComponentProvider
      themeSettings={{
        mode: "light", // 'light' (clair) | 'dark' (foncé)
        theme: "default", // 'default' | 'minimal' | 'rounded'
      }}
    >
      <App />
    </Auth0ComponentProvider>
    ```

    <table class="table">
      <thead>
        <tr>
          <th>Préréglage</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td><code>default</code></td>
          <td>Apparence Auth0 standard avec des ombres et des bordures équilibrées</td>
        </tr>

        <tr>
          <td><code>minimal</code></td>
          <td>Poids visuel réduit — moins d’ombres et des bordures plus fines</td>
        </tr>

        <tr>
          <td><code>rounded</code></td>
          <td>Rayons de bordure plus grands pour une apparence plus douce</td>
        </tr>
      </tbody>
    </table>

    <Callout icon="circle-info" color="#6366F1" iconType="regular">
      Les variables d’ombre ne s’appliquent qu’avec le préréglage `default`. Les préréglages `minimal` et `rounded` désactivent les ombres en interne.
    </Callout>

    ***

    ## Référence des variables CSS

    Toutes les propriétés visuelles sont gérées par des propriétés personnalisées CSS. Remplacez-les dans votre feuille de styles (comme illustré dans la section Setup ci-dessus) ou au moyen de la [prop `themeSettings.variables`](#js-api).

    Définissez-les dans `:root` pour les valeurs par défaut du mode clair. Utilisez `.dark` ou `themeSettings.mode` pour les valeurs du mode sombre.

    <Tabs>
      <Tab title="Couleurs">
        ```css theme={null}
        :root {
          /* Image de marque */
          --auth0-primary: oklch(37% 0 0);              /* boutons, liens, états actifs */
          --auth0-primary-foreground: oklch(100% 0 0);  /* texte sur les surfaces principales */

          /* Surfaces */
          --auth0-background: oklch(100% 0 0);          /* arrière-plan de la page */
          --auth0-foreground: oklch(9% 0 0);            /* texte par défaut */
          --auth0-card: oklch(100% 0 0);                /* arrière-plan des cartes */
          --auth0-card-foreground: oklch(0% 0 0);       /* texte dans les cartes */
          --auth0-popover: oklch(100% 0 0);             /* arrière-plan des menus déroulants et boîtes de dialogue */
          --auth0-popover-foreground: oklch(9% 0 0);    /* texte dans les fenêtres contextuelles */
          --auth0-input: oklch(100% 0 0);               /* arrière-plan des champs de saisie */

          /* Secondaires et atténuées */
          --auth0-secondary: oklch(96% 0 0);
          --auth0-secondary-foreground: oklch(100% 0 0);
          --auth0-muted: oklch(96% 0 0);                /* arrière-plans désactivés ou discrets */
          --auth0-muted-foreground: oklch(45% 0 0);     /* texte indicatif */

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

          /* Bordures */
          --auth0-border: oklch(89% 0 0);
          --auth0-ring: oklch(89% 0 0);                 /* anneau de focus */
        }
        ```
      </Tab>

      <Tab title="Couleurs de statut">
        Les jetons de couleur d’état n’ont pas de préfixe et sont définis indépendamment de l’ensemble de couleurs `--auth0-*`.

        | Jeton                        | Contrôle                                                     |
        | ---------------------------- | ------------------------------------------------------------ |
        | `--color-page`               | Arrière-plan de la page (conteneur le plus externe)          |
        | `--color-info`               | Arrière-plan de l’alerte d’information                       |
        | `--color-info-foreground`    | Texte et icône de l’alerte d’information                     |
        | `--color-success`            | Arrière-plan de l’alerte de réussite                         |
        | `--color-success-foreground` | Texte et icône de l’alerte de réussite                       |
        | `--color-warning`            | Arrière-plan de l’alerte d’avertissement                     |
        | `--color-warning-foreground` | Texte et icône de l’alerte d’avertissement                   |
        | `--color-destructive-border` | Bordure des champs de saisie ou des boutons destructifs      |
        | `--color-popover-border`     | Bordure de la fenêtre contextuelle ou de la liste déroulante |
        | `--color-input-foreground`   | Couleur du texte des champs de saisie                        |
        | `--color-input-muted`        | Arrière-plan de la variante atténuée des champs de saisie    |

        Redéfinissez-les dans `:root` ou au moyen de `themeSettings.variables.light` / `.dark` :

        ```css theme={null}
        :root {
          --color-success: oklch(94% 0.05 145);
          --color-success-foreground: oklch(30% 0.1 145);
        }
        ```
      </Tab>

      <Tab title="Rayon de bordure">
        ```css theme={null}
        :root {
          /* Les plus souvent ajustés */
          --radius-sm:  4px;   /* balises, puces */
          --radius-md:  6px;   /* petits éléments */
          --radius-lg:  10px;  /* boutons, champs de saisie */
          --radius-xl:  12px;  /* cartes */
          --radius-2xl: 16px;  /* fenêtres modales, grands panneaux */

          /* Réglage fin */
          --radius-xs:  2px;
          --radius-3xl: 20px;
          --radius-4xl: 24px;
          --radius-5xl: 32px;
          --radius-6xl: 40px;
          --radius-7xl: 48px;
          --radius-8xl: 56px;
          --radius-9xl: 64px;
        }
        ```
      </Tab>

      <Tab title="Typographie">
        ```css theme={null}
        :root {
          --font-size-page-header:      2.25rem;   /* 36 px — titre principal de la page */
          --font-size-heading:          1.5rem;    /* 24 px — titres de section */
          --font-size-title:            1.25rem;   /* 20 px — titres de carte */
          --font-size-subtitle:         1.125rem;  /* 18 px — titres secondaires */
          --font-size-body:             1rem;      /* 16 px — texte courant */
          --font-size-paragraph:        0.875rem;  /* 14 px — descriptions */
          --font-size-label:            0.875rem;  /* 14 px — libellés de formulaire */
          --font-size-page-description: 0.875rem;  /* 14 px — sous-titres de page */
        }
        ```
      </Tab>
    </Tabs>

    ***

    ## Override via l'API JS

    Passez `themeSettings.variables` à `Auth0ComponentProvider` pour appliquer des overrides par programmation. Ceux-ci ont la spécificité la plus élevée et remplacent aussi bien le CSS `:root` que les valeurs définies dans les feuilles de style.

    Les variables sont réparties en trois catégories :

    * `common` — appliqué quel que soit le mode (rayon, typographie)
    * `light` — appliqué lorsque `mode: "light"`
    * `dark` — appliqué lorsque `mode: "dark"`

    ```tsx theme={null}
    <Auth0ComponentProvider
      themeSettings={{
        mode: "light",
        variables: {
          common: {
            "--radius-lg": "12px",
            "--font-size-body": "0.875rem",
          },
          light: {
            "--auth0-primary": "#4f46e5",
            "--auth0-primary-foreground": "#ffffff",
            "--auth0-background": "#fafafa",
          },
          dark: {
            "--auth0-primary": "#818cf8",
            "--auth0-background": "#121212",
          },
        },
      }}
    >
      <App />
    </Auth0ComponentProvider>
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      `themeSettings.variables` utilise toujours les noms `--auth0-*` pour les jetons de couleur, quelle que soit votre configuration CSS. Les jetons de rayon des bordures et de typographie utilisent leurs propres noms (`--radius-*`, `--font-size-*`).
    </Callout>

    ***

    ## Remplacement par composant

    Chaque composant accepte une prop `styling` qui permet de limiter la portée des overrides sans toucher aux styles globaux.

    ```tsx theme={null}
    <SsoProviderTable
      styling={{
        variables: {
          common: {
            "--radius-lg": "16px",
          },
          light: {
            "--auth0-primary": "#059669",
            "--auth0-card": "#f8fafc",
          },
          dark: {
            "--auth0-primary": "#34d399",
            "--auth0-card": "#1e293b",
          },
        },
        classes: {
          "SsoProviderTable-header": "shadow-lg",
          "SsoProviderTable-table": "rounded-xl",
        },
      }}
    />
    ```

    Utilisez `variables` pour les overrides de token CSS limités à ce composant, et `classes` pour les classes Tailwind ou personnalisées appliquées à des parties précises du composant.

    <Accordion title="Cibles de classe offertes par composant">
      **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`
    </Accordion>

    ***

    ## Personnalisations courantes

    ### Couleur de l'image de marque

    ```css theme={null}
    :root {
      --auth0-primary: #4f46e5;
      --auth0-primary-foreground: #ffffff;
    }
    ```

    ### Coins arrondis

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

    ### Typographie compacte

    ```css theme={null}
    :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éagissent à `themeSettings.mode`. Reliez-le au state du thème de votre application :

    ```tsx theme={null}
    function App() {
      const [isDark, setIsDark] = useState(false);

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

    Ou synchroniser avec les préférences du système :

    ```tsx theme={null}
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

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

    Avec **Next.js** et le rendering côté serveur, lisez le mode préféré dans un cookie afin d'éviter un scintillement au chargement :

    ```tsx layout.tsx theme={null}
    export default async function RootLayout({ children }) {
      const cookieStore = await cookies();
      const mode = cookieStore.get("theme-mode")?.value === "dark" ? "dark" : "light";

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

  <Tab title="Tailwind v4">
    ## Configuration

    Importez Tailwind ainsi que la feuille de styles du composant :

    ```css theme={null}
    @import 'tailwindcss';
    @import '@auth0/universal-components-react/tailwind';
    ```

    Définissez vos jetons de design et rendez-les accessibles aux utilitaires Tailwind avec `@theme inline` :

    ```css theme={null}
    @theme inline {
      --color-primary: var(--color-primary);
      --color-primary-foreground: var(--color-primary-foreground);
      /* ajoutez les autres jetons que vous utilisez dans les utilitaires Tailwind */
    }

    :root {
      --color-primary: #4f46e5;
      --color-primary-foreground: #ffffff;
    }
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Next.js :** Même approche : placez vos lignes `@import` et votre bloc `@theme` dans `globals.css`, puis répartissez les substitutions de couleurs dans des fichiers `light.css` et `dark.css` distincts, importés depuis `globals.css`. Importez `globals.css` dans votre fichier `layout.tsx` racine.
    </Callout>

    ***

    ## Préréglages de thème

    Transmettez `themeSettings` à `Auth0ComponentProvider` pour basculer entre les variantes visuelles intégrées.

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

    <table class="table">
      <thead>
        <tr>
          <th>Préréglage</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td><code>default</code></td>
          <td>Style Auth0 standard avec des ombres et des bordures équilibrées</td>
        </tr>

        <tr>
          <td><code>minimal</code></td>
          <td>Poids visuel réduit — moins d’ombres et des bordures plus légères</td>
        </tr>

        <tr>
          <td><code>rounded</code></td>
          <td>Rayons de bordure plus grands pour une apparence plus douce</td>
        </tr>
      </tbody>
    </table>

    <Callout icon="circle-info" color="#6366F1" iconType="regular">
      Les variables d’ombre ne s’appliquent qu’avec le préréglage `default`. Les préréglages `minimal` et `rounded` désactivent les ombres à l’interne.
    </Callout>

    ***

    ## Référence des variables CSS

    Toutes les propriétés visuelles sont pilotées par des propriétés personnalisées CSS. Remplacez-les dans votre feuille de styles (comme illustré dans Setup ci-dessus) ou au moyen de la [prop `themeSettings.variables`](#js-api-tailwind).

    Définissez-les dans `:root` pour les valeurs par défaut du mode clair. Utilisez `.dark` ou `themeSettings.mode` pour les valeurs du mode sombre.

    <Tabs>
      <Tab title="Couleurs">
        ```css theme={null}
        :root {
          /* Image de marque */
          --color-primary: oklch(37% 0 0);              /* boutons, liens, états actifs */
          --color-primary-foreground: oklch(100% 0 0);  /* texte sur les surfaces primaires */

          /* Surfaces */
          --color-background: oklch(100% 0 0);          /* arrière-plan de la page */
          --color-foreground: oklch(9% 0 0);            /* texte par défaut */
          --color-card: oklch(100% 0 0);                /* arrière-plan des cartes */
          --color-card-foreground: oklch(0% 0 0);       /* texte dans les cartes */
          --color-popover: oklch(100% 0 0);             /* arrière-plan des menus déroulants et des boîtes de dialogue */
          --color-popover-foreground: oklch(9% 0 0);    /* texte dans les fenêtres contextuelles */
          --color-input: oklch(100% 0 0);               /* arrière-plan des champs de saisie */

          /* Secondaires et atténuées */
          --color-secondary: oklch(96% 0 0);
          --color-secondary-foreground: oklch(100% 0 0);
          --color-muted: oklch(96% 0 0);                /* arrière-plans désactivés ou discrets */
          --color-muted-foreground: oklch(45% 0 0);     /* texte indicatif */

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

          /* Bordures */
          --color-border: oklch(89% 0 0);
          --color-ring: oklch(89% 0 0);                 /* anneau de focus */
        }
        ```
      </Tab>

      <Tab title="Couleurs d’état">
        Les jetons de couleur de statut utilisent la même nomenclature `--color-*` que les jetons d’image de marque ci-dessus.

        | Jeton                        | Contrôle                                               |
        | ---------------------------- | ------------------------------------------------------ |
        | `--color-page`               | Arrière-plan de la page (conteneur le plus externe)    |
        | `--color-info`               | Arrière-plan de l’alerte d’information                 |
        | `--color-info-foreground`    | Texte et icône de l’alerte d’information               |
        | `--color-success`            | Arrière-plan de l’alerte de réussite                   |
        | `--color-success-foreground` | Texte et icône de l’alerte de réussite                 |
        | `--color-warning`            | Arrière-plan de l’alerte d’avertissement               |
        | `--color-warning-foreground` | Texte et icône de l’alerte d’avertissement             |
        | `--color-destructive-border` | Bordure d’un champ ou bouton destructif                |
        | `--color-popover-border`     | Bordure d’une fenêtre contextuelle ou liste déroulante |
        | `--color-input-foreground`   | Couleur du texte du champ                              |
        | `--color-input-muted`        | Arrière-plan de la variante de champ atténuée          |

        Remplacez-les dans `:root` ou à l’aide de `themeSettings.variables.light` / `.dark` :

        ```css theme={null}
        :root {
          --color-success: oklch(94% 0.05 145);
          --color-success-foreground: oklch(30% 0.1 145);
        }
        ```
      </Tab>

      <Tab title="Rayon des bordures">
        ```css theme={null}
        :root {
          /* Les plus souvent ajustés */
          --radius-sm:  4px;   /* balises, puces */
          --radius-md:  6px;   /* petits éléments */
          --radius-lg:  10px;  /* boutons, champs de saisie */
          --radius-xl:  12px;  /* cartes */
          --radius-2xl: 16px;  /* fenêtres modales, grands panneaux */

          /* Réglage fin */
          --radius-xs:  2px;
          --radius-3xl: 20px;
          --radius-4xl: 24px;
          --radius-5xl: 32px;
          --radius-6xl: 40px;
          --radius-7xl: 48px;
          --radius-8xl: 56px;
          --radius-9xl: 64px;
        }
        ```
      </Tab>

      <Tab title="Typographie">
        ```css theme={null}
        :root {
          --font-size-page-header:      2.25rem;   /* 36 px — titre principal de la page */
          --font-size-heading:          1.5rem;    /* 24 px — titres de section */
          --font-size-title:            1.25rem;   /* 20 px — titres de carte */
          --font-size-subtitle:         1.125rem;  /* 18 px — titres secondaires */
          --font-size-body:             1rem;      /* 16 px — texte courant */
          --font-size-paragraph:        0.875rem;  /* 14 px — descriptions */
          --font-size-label:            0.875rem;  /* 14 px — étiquettes de formulaire */
          --font-size-page-description: 0.875rem;  /* 14 px — sous-titres de page */
        }
        ```
      </Tab>
    </Tabs>

    ***

    ## Override via l'API JS

    Passez `themeSettings.variables` à `Auth0ComponentProvider` pour appliquer des overrides par programmation. Ils possèdent la spécificité la plus élevée et remplacent à la fois le CSS `:root` et toute valeur définie dans les feuilles de style.

    Les variables sont réparties en trois catégories :

    * `common` — appliqué quel que soit le mode (rayon, typographie)
    * `light` — appliqué lorsque `mode: "light"`
    * `dark` — appliqué lorsque `mode: "dark"`

    ```tsx theme={null}
    <Auth0ComponentProvider
      themeSettings={{
        mode: "light",
        variables: {
          common: {
            "--radius-lg": "12px",
            "--font-size-body": "0.875rem",
          },
        },
      }}
    >
      <App />
    </Auth0ComponentProvider>
    ```

    ***

    ## Exception par composant

    Chaque composant accepte une prop `styling` permettant de limiter la portée des remplacements sans toucher aux styles globaux.

    ```tsx theme={null}
    <SsoProviderTable
      styling={{
        variables: {
          common: {
            "--radius-lg": "16px",
          },
        },
        classes: {
          "SsoProviderTable-header": "shadow-lg",
          "SsoProviderTable-table": "rounded-xl",
        },
      }}
    />
    ```

    Utilisez `variables` pour les overrides de tokens CSS limités à ce composant, et `classes` pour les classes Tailwind ou personnalisées appliquées à des parties précises du composant.

    <Accordion title="Cibles de classe offertes par composant">
      **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`
    </Accordion>

    ***

    ## Personnalisations courantes

    ### Couleur de l'image de marque

    ```css theme={null}
    :root {
      --color-primary: #4f46e5;
      --color-primary-foreground: #ffffff;
    }
    ```

    ### Coins arrondis

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

    ### Typographie compacte

    ```css theme={null}
    :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éagissent à `themeSettings.mode`. Reliez-le au state du thème de votre application :

    ```tsx theme={null}
    function App() {
      const [isDark, setIsDark] = useState(false);

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

    Ou synchronisez avec les préférences du système :

    ```tsx theme={null}
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

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

    Avec **Next.js** et le rendering côté serveur, lisez le mode préféré depuis un cookie afin d'éviter un scintillement au chargement :

    ```tsx layout.tsx theme={null}
    export default async function RootLayout({ children }) {
      const cookieStore = await cookies();
      const mode = cookieStore.get("theme-mode")?.value === "dark" ? "dark" : "light";

      return (
        <html lang="en">
          <body>
            <Auth0ComponentProvider
              mode="proxy"
              domain={process.env.NEXT_PUBLIC_AUTH0_DOMAIN}
              proxyConfig={{ baseUrl: "/api/auth" }}
              themeSettings={{ mode }}
            >
              {children}
            </Auth0ComponentProvider>
          </body>
        </html>
      );
    }
    ```
  </Tab>
</Tabs>