> ## 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 l’apparence de votre widget Lock peut être important pour l’image de marque et pour assurer la cohérence de l’interface utilisateur. Cette ressource présente les différentes façons de le faire lorsque vous intégrez Lock à votre projet.
# Personnalisation de l’interface utilisateur de Lock
Vous pouvez personnaliser l’apparence de votre widget Lock de plusieurs façons. La méthode la meilleure et la plus sûre consiste à utiliser les options JavaScript fournies.
## Options JavaScript
Vous pouvez configurer diverses options de personnalisation de votre Lock au moyen du paramètre `options` lorsque vous l’instanciez. Certaines vous permettent de personnaliser l’interface utilisateur. Les options de personnalisation de l’interface utilisateur sont encore en cours d’élaboration; nous prévoyons en ajouter d’autres progressivement.
Commencez par définir l’objet `options`, qui contient les options que vous voulez personnaliser. Vous devrez ensuite inclure cet objet `options` comme troisième paramètre lorsque vous instanciez Lock; plus de détails ci-dessous.
### Options de personnalisation du thème
Quelques options de personnalisation du thème sont actuellement offertes sous la propriété `theme`.
#### logo {String}
La valeur de `logo` est l’URL d’une image qui sera affichée dans l’en-tête de Lock et, par défaut, le logo d’Auth0 est utilisé. La résolution minimale recommandée est de 200 pixels (largeur) sur 200 pixels (hauteur).
```js lines theme={null}
var options = {
theme: {
logo: 'https://example.com/logo.png'
}
};
```
#### primaryColor {String}
La propriété `primaryColor` définit la couleur principale de Lock; toutes les couleurs utilisées dans le widget sont calculées à partir de celle-ci. Cette option est utile lorsque vous fournissez un `logo` personnalisé, afin de vous assurer que toutes les couleurs s’harmonisent bien avec la palette du `logo`. La valeur par défaut est `#ea5323`.
```js lines theme={null}
var options = {
theme: {
logo: 'https://example.com/logo.png',
primaryColor: '#31324F'
}
};
```
#### authButtons `{Object}`
Permet de personnaliser les boutons dans Lock. Chaque connexion personnalisée dont vous souhaitez personnaliser le bouton doit être répertoriée par nom, avec son propre ensemble de paramètres. Les paramètres pouvant être personnalisés sont indiqués ci-dessous :
* **displayName** \{String}: Le nom à afficher à la place du nom de la connexion lors de la création du libellé du bouton, par exemple `LOGIN WITH MYCONNECTION` pour la connexion).
* **primaryColor** \{String}: La couleur d’arrière-plan du bouton. La valeur par défaut est `#eb5424`.
* **foregroundColor** \{String}: La couleur du texte du bouton. La valeur par défaut est `#FFFFFF`.
* **icon** \{String}: L’URL de l’icône pour cette connexion. Par exemple : `http://site.com/logo.png`.
```js lines theme={null}
var options = {
theme: {
authButtons: {
"testConnection": {
displayName: "Test Conn",
primaryColor: "#b7b7b7",
foregroundColor: "#000000",
icon: "http://example.com/icon.png"
},
"testConnection2": {
primaryColor: "#000000",
foregroundColor: "#ffffff",
}
}
}
};
```
### Personnalisation du texte
L’option `languageDictionary` permet de personnaliser chaque texte affiché dans Lock. La valeur par défaut est {}. Consultez l’exemple ci-dessous.
```js lines theme={null}
var options = {
languageDictionary: {
emailInputPlaceholder: "something@youremail.com",
title: "Log me in"
},
};
```
Pour obtenir la liste complète des éléments que vous pouvez personnaliser à l’aide de `languageDictionary`, consultez la [spécification anglaise du Language Dictionary](https://github.com/auth0/lock/blob/master/src/i18n/en.js) dans le dépôt.
### Instanciation de Lock
Enfin, instanciez votre Lock à l’aide de l’objet `options` que vous avez défini et qui contient vos options personnalisées.
`var lock = new Auth0Lock('{yourClientId}', '{yourDomain}', options);`
## Surcharge du CSS
Il n’est pas recommandé de personnaliser votre Lock en surchargeant son CSS. Le problème, c’est qu’avec les nouvelles versions de Lock, certains styles peuvent changer, ce qui peut entraîner des problèmes imprévus si vous surchargez le CSS. De plus, il est possible de passer simplement à côté de l’utilisation de styles ailleurs; ainsi, même si la modification peut sembler correcte dans une vue, elle pourrait ne pas l’être dans une autre.
Si vous comptez tout de même surcharger le CSS pour personnaliser davantage votre Lock, nous vous recommandons d’utiliser une version de correctif précise de Lock plutôt qu’une version majeure ou mineure, afin de limiter les résultats inattendus qui pourraient survenir lorsque vous modifiez les styles, puis qu’un autre correctif est déployé et entraîne un comportement inattendu dans votre interface utilisateur en raison de ces changements. Pour ce faire, assurez-vous d’indiquer cette version de correctif (`x.y.z`) lorsque vous incluez Lock, ou téléchargez-la.
De plus, nous vous recommandons bien sûr de tester vos modifications CSS de façon exhaustive, afin de vous assurer que l’expérience correspond bien à celle que vous souhaitez offrir à vos clients.
## Renseignements supplémentaires
Si vous cherchez des renseignements plus détaillés pour personnalner Lock pour votre application, consultez la page des [options de configuration](/fr-CA/docs/libraries/lock/lock-configuration) ou celle de l’[API de Lock](/fr-CA/docs/libraries/lock/lock-api-reference) !
Si vous souhaitez voir ajouter des options précises de personnalisation du thème, faites-le-nous savoir. Nous travaillons à améliorer les options de personnalisation offertes par JavaScript, et cette liste sera mise à jour à mesure que de nouvelles options seront ajoutées.