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

> Personnalisation de l’UI de Lock.Android

# Lock.Android : personnalisation du thème

Vous pouvez personnaliser l’apparence de l’UI de **Lock.Android**. En plus de divers éléments, comme le logo et le titre de l’en-tête, vous pouvez modifier certaines couleurs, certains boutons et d’autres éléments pour les harmoniser avec le thème de votre application.

<div id="supported-attributes-list">
  ## Liste des attributs pris en charge
</div>

| Nom                    | Type                 | Description                                                                                                                                    |
| ---------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| Auth0.HeaderLogo       | drawable - référence | Ressource drawable du logo à afficher dans l’en-tête. La résolution minimale recommandée est de 200 pixels (largeur) sur 200 pixels (hauteur). |
| Auth0.HeaderTitle      | string - référence   | Texte à afficher comme titre dans l’en-tête.                                                                                                   |
| Auth0.HeaderTitleColor | couleur - référence  | Couleur du texte du titre.                                                                                                                     |
| Auth0.HeaderBackground | couleur - référence  | Utilisée comme couleur d’arrière-plan de l’en-tête.                                                                                            |
| Auth0.PrimaryColor     | couleur - référence  | Utilisée comme état *normal* dans des widgets comme le bouton de soumission. Également utilisée comme couleur *d’accent*.                      |
| Auth0.DarkPrimaryColor | couleur - référence  | Utilisée comme état *appuyé* dans des widgets comme le bouton de soumission.                                                                   |

<div id="create-a-new-resource-file">
  ## Créer un nouveau fichier de ressources
</div>

Commencez par créer un nouveau `Theme` qui hérite de `Lock.Theme`, puis redéfinissez les attributs que vous souhaitez personnaliser. Les attributs qui ne sont pas redéfinis reprendront par défaut ceux définis dans `Lock.Theme`.

```xml lines theme={null}
<resources>
  <style name="MyTheme" parent="Lock.Theme">
    <item name="Auth0.HeaderLogo">@drawable/com_auth0_lock_header_logo</item>
    <item name="Auth0.HeaderTitle">@string/com_auth0_lock_header_title</item>
    <item name="Auth0.HeaderTitleColor">@color/com_auth0_lock_text</item>
    <item name="Auth0.HeaderBackground">@color/com_auth0_lock_header_background</item>
    <item name="Auth0.PrimaryColor">@color/com_auth0_lock_submit_normal</item>
    <item name="Auth0.DarkPrimaryColor">@color/com_auth0_lock_submit_pressed</item>
  </style>
</resources>
```

Pour commencer à utiliser le nouveau thème, configurez l’activité dans le fichier `AndroidManifest.xml` à l’aide de l’attribut `android:theme`. Selon que vous utilisez Classic Lock ou <Tooltip tip="Passwordless : forme d’authentification qui ne repose pas sur un mot de passe comme premier facteur." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Passwordless">Passwordless</Tooltip> Lock, la déclaration d’activité à modifier sera différente. Comme la bibliothèque Lock déclare déjà ces activités en interne, vous devez les redéclarer à l’aide de l’attribut spécial tools`:replace`, qui remplacera la déclaration de la bibliothèque uniquement pour l’attribut de thème.

```xml lines theme={null}
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.company.app">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <!-- Classic -->
        <activity
            android:name="com.auth0.android.lock.LockActivity"
            android:theme="@style/MyTheme"
            tools:replace="android:theme" />
        <!-- Passwordless -->
        <activity
            android:name="com.auth0.android.lock.PasswordlessLockActivity"
            android:theme="@style/MyTheme"
            tools:replace="android:theme" />
    </application>
</manifest>
```

<Warning>
  Veuillez noter que si vous définissez votre propre Theme dans un fichier de ressources de style et oubliez de préciser que le parent du Theme est `Lock.Theme`, ou si vous oubliez d’indiquer dans le Manifest quel Theme utiliser pour l’Activity, vous vous retrouverez avec une UI vraiment peu esthétique. Cela peut aussi se produire si les valeurs spécifiées dans votre Theme personnalisé ne sont pas valides.
</Warning>

<div id="custom-oauth-connection-buttons">
  ## Boutons de connexion OAuth personnalisés
</div>

Pour personnaliser le style d’une connexion à un <Tooltip tip="Fournisseur d’identité (IdP) : service qui stocke et gère les identités numériques." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=identity+provider">fournisseur d’identité</Tooltip> tiers, vous devez créer une nouvelle connexion à l’aide de l’[extension](https://manage.auth0.com/#/extensions) `Custom Social Connections`, en remplissant tous les champs requis avant d’enregistrer les modifications.

Pour personnaliser le style d’une connexion à un fournisseur d’identité tiers dans Lock, appelez le builder et transmettez-lui `connectionName` ainsi que le `style` à utiliser.

Créez d’abord un style personnalisé qui étend `Lock.Theme.AuthStyle.` Définissez le logo, la couleur d’arrière-plan et le nom de la connexion en utilisant des noms de clés semblables à ceux de l’exemple ci-dessous.

```xml lines theme={null}
<style name="Style.Facebook" parent="Lock.Theme.AuthStyle">
    <item name="Auth0.BackgroundColor">@color/facebook_color</item>
    <item name="Auth0.Name">@string/facebook_name</item>
    <item name="Auth0.Logo">@drawable/facebook_logo</item>
</style>
```

Dans la configuration du builder, ajoutez le `AuthStyle` pour le nom de connexion que vous souhaitez surcharger.

`builder.withAuthStyle("facebook", R.style.Style_Facebook)
.build(...);`

Lorsque **Lock** doit afficher cette connexion dans un **SocialButton**, il recherche d’abord les styles surchargés par l’utilisateur. S’il n’en trouve aucun, il utilisera alors le style par défaut de Lock. D’après l’exemple ci-dessus, cela signifie que pour `facebook`, il utiliserait la couleur d’arrière-plan de Facebook, le logo Facebook et « `FACEBOOK` » comme nom.