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

# Lock.Android: thème personnalisé

> Personnalisation de l’interface utilisateur de Lock.Android

Vous pouvez personnaliser l’apparence de l’interface utilisateur de **Lock.Android**. Outre divers éléments tels que 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.

## Liste des attributs pris en charge

\| Nom | Type | Description |
\| :--- | :--- : | :--- |
|Auth0.HeaderLogo | drawable - reference | Peignable de logo à afficher dans l’en-tête. La résolution minimale recommandée est de 200 pixels (largeur) par 200 pixels (hauteur). |
|Auth0.HeaderTitle | string - référence | Texte à afficher comme titre dans l’en-tête. |
|Auth0.HeaderTitleColor | color - reference | Couleur pour le texte du titre. |Auth0.HeaderBackground | color - reference | Utilisé comme couleur d’arrière-plan dans l’en-tête. |
|Auth0.PrimaryColor | color - reference | Utilisé comme *normal* state dans les widgets comme le bouton Soumettre. Également utilisée comme *accent* color. |
|Auth0.DarkPrimaryColor | couleur - référence | Utilisée en tant qu’état *pressed* state dans les widgets tels que le bouton Soumettre. |

## Créer un nouveau fichier de ressources

Tout d’abord, créez un nouveau `Theme` basé sur `Lock.Theme` et modifiez les attributs que vous souhaitez personnaliser. Les attributs qui n’ont pas été modifiés prendront 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>
```

To start using the new theme, set up the Activity in the `AndroidManifest.xml` file with the `android:theme` attribute. Depending on if you are using Classic Lock or <Tooltip href="/docs/fr-ca/glossary?term=passwordless" tip="Sans mot de passe
Forme d’authentification qui ne repose pas sur un mot de passe comme premier facteur." cta="Voir le glossaire">Passwordless</Tooltip> Lock, the activity declaration to update will differ. Because the Lock library declares these activities internally, you need to re-declare them with the special tools`:replace` attribute that will override the library’s declaration only for the theme attribute.

```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 thème dans un fichier de ressources de style et que vous oubliez de spécifier que le parent du thème est `Lock.Theme`, ou si vous oubliez d’indiquer au manifeste quel sera le thème de l’activité, vous obtiendrez au final une interface utilisateur au rendu très peu esthétique. Cela peut également se produire si les valeurs spécifiées dans votre Thème personnalisé ne sont pas valides.
</Warning>

## Boutons de connexion OAuth personnalisés

Pour personnaliser le style de la connexion d’un fournisseur d’identité tiers, vous devez créer une nouvelle connexion en utilisant [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 de fournisseur d’identité tiers dans Lock, appelez le constructeur et transmettez-lui le `connectionName` et le `style` à utiliser.

Tout d’abord, créez un style personnalisé qui étend `Lock.Theme.AuthStyle`. Définissez le logo, la couleur de fond et le nom de la connexion en utilisant des noms de clés similaires à 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>
```

In the builder’s setup, add the `AuthStyle` for the connection name that you want to override.

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

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