> ## 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 d’Universal Components pour Android

> Découvrez comment personnaliser le style et les thèmes d’Universal Components pour Android.

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="beta" terms="true" contact="Auth0 Support" />

Les [Universal Components pour Android](https://github.com/auth0/ui-components-android) d’Auth0 utilisent un modèle de jetons de conception. Les propriétés visuelles telles que les couleurs, la typographie, l’espacement, le rayon des coins et la taille des composants sont toutes exprimées sous forme de jetons que vous pouvez remplacer sans modifier vos layouts.

Universal Components sont fournies avec un thème Auth0 par défaut. Vous pouvez fournir votre propre thème pour qu’il corresponde à votre image de marque.

<div id="how-theming-works">
  ## Fonctionnement de la personnalisation du thème
</div>

Universal Components pour Android utilise un thème Jetpack Compose qui reprend le modèle `MaterialTheme` de Material 3.

Vous pouvez envelopper le contenu du SDK dans `Auth0Theme { ... }` afin de fournir des jetons, ou transmettre directement `themeConfiguration` à `AuthenticatorSettingsComponent`.

Vous pouvez accéder aux jetons depuis n’importe quel composable à l’aide de `Auth0Theme.colors`, `Auth0Theme.typography`, `Auth0Theme.shapes`, `Auth0Theme.dimensions` et `Auth0Theme.sizes`.

<div id="zero-configuration">
  ### Sans configuration
</div>

Si vous ne configurez aucun thème, Universal Components pour Android affiche le thème par défaut d’Auth0. L’exemple suivant affiche `AuthenticatorSettingsComponent` sans personnalisation :

```kotlin wrap lines theme={null}
@Composable
fun MFASettingsScreen() {
    AuthenticatorSettingsComponent()
}
```

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Aucune configuration supplémentaire n’est requise pour charger le thème par défaut d’Auth0. Universal Components l’applique automatiquement lorsqu’aucun thème personnalisé n’est fourni.
</Callout>

<div id="override-a-subset-of-tokens">
  ### Remplacer un sous-ensemble de jetons
</div>

Vous pouvez remplacer certains jetons, tandis qu’Universal Components pour Android affiche tous les autres à l’aide du thème Auth0 par défaut.

L’exemple suivant remplace les jetons `Auth0Color.light().copy(...)`, `Auth0Color.dark()` ou `Auth0Typography.default().copy(...)` :

```kotlin wrap lines theme={null}
@Composable
fun MFASettingsScreen() {
    AuthenticatorSettingsComponent(
        themeConfiguration = Auth0ThemeConfiguration(
            color = Auth0Color.light().copy(
                backgroundPrimary = Color(0xFFFF6B00),
                textOnPrimary = Color.White
            )
        )
    )
}
```

<div id="force-dark-mode">
  ### Forcer le mode sombre
</div>

Pour forcer le mode sombre, vous pouvez envelopper le composant dans `Auth0Theme(darkTheme = true)` ou spécifier explicitement le jeu de couleurs sombre :

```kotlin wrap lines theme={null}
// Option 1 : forcer le mode sombre avec Auth0Theme
@Composable
fun MFASettingsScreen() {
    Auth0Theme(darkTheme = true) {
        AuthenticatorSettingsComponent()
    }
}

// Option 2 : palette de couleurs sombres explicite
@Composable
fun MFASettingsScreen() {
    AuthenticatorSettingsComponent(
        themeConfiguration = Auth0ThemeConfiguration(
            color = Auth0Color.dark()
        )
    )
}
```

<div id="configure-a-full-brand-theme">
  ### Configurer un thème complet d’image de marque
</div>

Créez votre propre thème d’image de marque combinant couleurs, typographie et formes dans une seule configuration `Auth0ThemeConfiguration` :

```kotlin wrap lines theme={null}
@Composable
fun MFASettingsScreen() {
    AuthenticatorSettingsComponent(
        themeConfiguration = Auth0ThemeConfiguration(
            color = Auth0Color.light().copy(
                backgroundPrimary = Color(0xFF0066CC),
                textOnPrimary = Color.White,
                backgroundLayerBase = Color(0xFFF5F5F5),
                backgroundLayerMedium = Color.White,
                textBold = Color(0xFF1F1F1F),
                textDefault = Color(0xFF636363),
                backgroundError = Color(0xFFFF4444),
                backgroundSuccess = Color(0xFF00CC66),
                borderDefault = Color(0xFFE0E0E0)
            ),
            typography = Auth0Typography.default().copy(
                displayMedium = TextStyle(fontSize = 22.sp, fontWeight = FontWeight.Bold),
                body = TextStyle(fontSize = 18.sp)
            ),
            shapes = Auth0Shapes(
                none = RoundedCornerShape(0.dp),
                extraSmall = RoundedCornerShape(4.dp),
                small = RoundedCornerShape(8.dp),
                medium = RoundedCornerShape(12.dp),
                large = RoundedCornerShape(16.dp),
                extraLarge = RoundedCornerShape(24.dp),
                full = RoundedCornerShape(100.dp)
            )
        )
    )
}
```

<div id="read-theme-tokens-in-your-own-composables">
  ### Lire les jetons du thème dans vos propres composables
</div>

Accédez aux jetons du thème dans un composable `Auth0Theme { ... }` à l’aide de l’objet accessor :

```kotlin wrap lines theme={null}
@Composable
fun CustomAuthCard() {
    Card(
        shape = Auth0Theme.shapes.medium,
        colors = CardDefaults.cardColors(
            containerColor = Auth0Theme.colors.backgroundLayerMedium
        )
    ) {
        Column(modifier = Modifier.padding(Auth0Theme.dimensions.spacingMd)) {
            Text(
                text = "Authenticator",
                style = Auth0Theme.typography.title,
                color = Auth0Theme.colors.textBold
            )
            Text(
                text = "Enabled",
                style = Auth0Theme.typography.bodySmall,
                color = Auth0Theme.colors.textDefault
            )
        }
    }
}
```

<div id="switch-themes-at-runtime">
  ### Changer de thème à l’exécution
</div>

Vous pouvez conserver la configuration du thème dans l’état afin de passer du thème clair au thème sombre (ou d’une variante de l’image de marque à une autre) sans recréer l’écran :

```kotlin wrap lines theme={null}
@Composable
fun MFASettingsScreen() {
    var isDarkMode by remember { mutableStateOf(false) }

    val themeConfig = Auth0ThemeConfiguration(
        color = if (isDarkMode) Auth0Color.dark() else Auth0Color.light()
    )

    Column {
        Switch(checked = isDarkMode, onCheckedChange = { isDarkMode = it })
        AuthenticatorSettingsComponent(themeConfiguration = themeConfig)
    }
}
```

<div id="token-reference">
  ### Référence des jetons
</div>

<Accordion title="Couleurs — Auth0Color">
  Pour personnaliser les couleurs, utilisez les fabriques `Auth0Color.light()` et `Auth0Color.dark()` comme points de départ, puis `.copy(...)` pour remplacer des jetons précis.

  | **Jeton**                                                                                  | **Utilisation**                                                        |
  | ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------- |
  | `backgroundPrimary`, `backgroundPrimarySubtle`, `backgroundInverse`, `backgroundAccent`    | Surfaces d’appel à l’action et d’accentuation                          |
  | `backgroundLayerTop`, `backgroundLayerMedium`, `backgroundLayerBase`                       | Couches de superposition, de cartes et d’arrière-plan de l’application |
  | `backgroundError`, `backgroundErrorSubtle`, `backgroundSuccess`, `backgroundSuccessSubtle` | Surfaces de rétroaction                                                |
  | `borderBold`, `borderDefault`, `borderSubtle`, `borderShadow`                              | Bordures d’accentuation et d’élévation                                 |
  | `textBold`, `textDefault`, `textDisabled`                                                  | Texte des titres, du corps et désactivé                                |
  | `textOnPrimary`, `textOnSuccess`, `textOnError`                                            | Texte sur des surfaces colorées                                        |
</Accordion>

<Accordion title="Typographie — Auth0Typography">
  Pour personnaliser la typographie, utilisez le jeton Compose `TextStyle`. Vous pouvez le remplacer avec `Auth0Typography.default().copy(...)`.

  | **Jeton**                  | **Utilisation**                                      |
  | -------------------------- | ---------------------------------------------------- |
  | `displayMedium`, `display` | Titres de héros et d’écrans principaux               |
  | `titleLarge`, `title`      | Titres d’écran et titres dans le contenu             |
  | `body`, `bodySmall`        | Descriptions, texte du corps et notes de bas de page |
  | `label`                    | Étiquettes de boutons et de champs de formulaire     |
  | `helper`, `overline`       | Légendes, texte d’aide et étiquettes de catégorie    |
</Accordion>

<Accordion title="Formes — Auth0Shapes">
  | **Jeton**                                              | **Utilisation**                |
  | ------------------------------------------------------ | ------------------------------ |
  | `none`                                                 | Aucun arrondi                  |
  | `extraSmall`, `small`, `medium`, `large`, `extraLarge` | Échelle d’arrondi standard     |
  | `full`                                                 | Entièrement arrondi (pastille) |
</Accordion>

<Accordion title="Dimensions — Auth0Dimensions">
  L’espacement utilise par défaut une grille de `4 dp`. Accédez aux jetons d’espacement avec `Auth0Theme.dimensions.*`.

  | **Jeton**    | **Par défaut** | **Description**                                            |
  | ------------ | -------------- | ---------------------------------------------------------- |
  | `spacingXxs` | 4 dp           | Espacement minimal entre des éléments étroitement liés     |
  | `spacingXs`  | 8 dp           | Petit espacement entre des éléments groupés                |
  | `spacingSm`  | 12 dp          | Marge intérieure moyenne                                   |
  | `spacingMd`  | 16 dp          | Marge intérieure standard des composants et conteneurs     |
  | `spacingLg`  | 24 dp          | Marge intérieure plus grande pour les sections principales |
  | `spacingXl`  | 32 dp          | Marge intérieure très grande                               |
  | `spacingXxl` | 48 dp          | Marge intérieure deux fois plus grande                     |
</Accordion>

<Accordion title="Tailles — Auth0Sizes">
  Accédez aux dimensions des composants avec `Auth0Theme.sizes.*`.

  | **Jeton**             | **Par défaut** | **Utilisation**                                              |
  | --------------------- | -------------- | ------------------------------------------------------------ |
  | `buttonHeight`        | 56 dp          | Tous les boutons d’action principaux et secondaires          |
  | `inputHeight`         | 68 dp          | Champs de saisie de texte et de numéros de téléphone         |
  | `otpFieldWidth`       | 52 dp          | Largeur d’un champ de saisie pour un chiffre OTP             |
  | `otpFieldHeight`      | 60 dp          | Hauteur d’un champ de saisie pour un chiffre OTP             |
  | `codeContainerHeight` | 56 dp          | Conteneurs d’affichage des codes de récupération             |
  | `iconSmall`           | 16 dp          | Petites icônes — chevrons, indicateurs d’information, coches |
  | `iconMedium`          | 24 dp          | Icônes standard — images de méthodes d’authentification      |
  | `iconLarge`           | 32 dp          | Grandes icônes — menu à trois points                         |
  | `padding`             | 16 dp          | Marge intérieure par défaut des composants                   |
  | `paddingLarge`        | 24 dp          | Marge intérieure plus grande des composants                  |
</Accordion>

<div id="learn-more">
  ## En savoir plus
</div>

<CardGroup cols={2}>
  <Card title="Installer le SDK Android" icon="download" href="/docs/fr-ca/get-started/universal-components/android/android-overview">
    Prérequis de la plateforme et installation d’Android.
  </Card>

  <Card title="Créer une interface de sécurité des comptes en libre-service" icon="key" href="/docs/fr-ca/get-started/universal-components/android/components/my-account-overview">
    Initialisez le SDK et connectez le fournisseur de jetons à votre tenant Auth0.
  </Card>
</CardGroup>