> ## 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’interface utilisateur de Lock.Android

# Lock.Android: Personnalisation du thème

Vous pouvez personnaliser l’apparence de l’interface utilisateur 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 adapter au thème de votre application.

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

| Nom                    | Type                 | Description                                                                                                                                    |
| ---------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| Auth0.HeaderLogo       | drawable - reference | 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 - reference   | Texte à afficher comme titre dans l’en-tête.                                                                                                   |
| Auth0.HeaderTitleColor | color - reference    | Couleur du texte du titre.                                                                                                                     |
| Auth0.HeaderBackground | color - reference    | Utilisée comme couleur d’arrière-plan dans l’en-tête.                                                                                          |
| Auth0.PrimaryColor     | color - reference    | Utilisée pour l’état *normal* dans des widgets comme le bouton Submit. Également utilisée comme couleur *d’accent*.                            |
| Auth0.DarkPrimaryColor | color - reference    | Utilisée pour l’état *appuyé* dans des widgets comme le bouton Submit.                                                                         |

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

Commencez par créer un nouveau `Theme` qui étend `Lock.Theme`, puis redéfinissez les attributs que vous souhaitez personnaliser. Les attributs que vous ne redéfinissez pas utiliseront 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’Activity 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="/fr-CA/docs/glossary?term=Passwordless">Passwordless</Tooltip> Lock, la déclaration d’activité à mettre à jour ne sera pas la même. Comme la bibliothèque Lock déclare 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">
        <!-- Classique -->
        <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 thème dans un fichier de ressources de style et que vous oubliez de préciser que le parent du thème est `Lock.Theme`, ou que vous oubliez d’indiquer dans le manifeste quel thème sera utilisé pour l’activité, vous vous retrouverez avec une interface utilisateur vraiment peu esthétique. Cela peut aussi se produire si les valeurs que vous spécifiez dans votre thème personnalisé sont invalides.
</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="/fr-CA/docs/glossary?term=identity+provider">fournisseur d’identité</Tooltip> tiers, vous devez créer une nouvelle connexion à l’aide de l’extension [`Custom Social Connections`](https://manage.auth0.com/#/extensions), en remplissant tous les champs obligatoires avant d’enregistrer les modifications.

Pour personnaliser le style d’une connexion à un fournisseur d’identité tiers dans Lock, appelez le builder en lui transmettant à la fois `connectionName` et le `style` à utiliser.

Commencez par créer un style personnalisé qui étend `Lock.Theme.AuthStyle.` Définissez le logo, la couleur d’arrière-plan et le nom de la connexion à l’aide de 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 la 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 le style Lock par défaut. En reprenant 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.