> ## 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 votre image de marque et pour offrir une interface utilisateur cohérente. 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 meilleure et la plus sûre consiste à utiliser les options Javascript fournies.
## Options Javascript
Vous pouvez configurer diverses personnalisations de votre Lock au moyen du paramètre `options` lorsque vous instanciez votre Lock. Certaines de ces options vous permettent de personnaliser votre interface utilisateur. Les options de personnalisation de l’interface utilisateur sont encore en cours d’élaboration; nous prévoyons d’en ajouter d’autres au fil du temps.
Vous commencerez par définir l’objet `options`, qui contient les options que vous souhaitez personnaliser. Vous devrez ensuite inclure cet objet `options` comme troisième paramètre lorsque vous instanciez Lock; vous trouverez plus de détails à ce sujet ci-dessous.
### Options de thème
Quelques options de thème sont actuellement offertes sous l’espace de noms de la propriété `theme`.
#### logo {String}
La valeur de `logo` est l’URL d’une image qui sera placée dans l’en-tête de Lock; 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 du Lock; toutes les couleurs utilisées dans le widget seront calculées à partir de celle-ci. Cette option est utile lorsque vous fournissez un `logo` personnalisé, afin de veiller à ce 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 voulez personnaliser le bouton doit être indiquée par son nom, avec son propre ensemble de paramètres. Les paramètres personnalisables sont énuméré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 de 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",
}
}
}
};
```
### Personnaliser le texte
L’option `languageDictionary` permet de personnaliser tout le texte affiché dans Lock. La valeur par défaut est {}. Voir ci-dessous un exemple.
```js lines theme={null}
var options = {
languageDictionary: {
emailInputPlaceholder: "something@youremail.com",
title: "Log me in"
},
};
```
Pour obtenir la liste complète des éléments pouvant être personnalisés avec `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.
### Instancier Lock
Enfin, vous pouvez instancier votre Lock à l’aide de l’objet `options` que vous avez défini, lequel contient vos options personnalisées.
`var lock = new Auth0Lock('{yourClientId}', '{yourDomain}', options);`
## Redéfinition du CSS
Il n’est pas recommandé de personnaliser votre Lock en redéfinissant 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 redéfinissez le CSS. De plus, il est facile de ne pas remarquer l’utilisation de styles à d’autres endroits : même si le changement peut sembler correct dans une vue, il pourrait ne pas l’être dans une autre.
Si vous comptez quand même redéfinir 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 peuvent survenir lorsque vous modifiez les styles et qu’un autre correctif est ensuite déployé, ce qui pourrait provoquer un comportement inattendu dans votre interface utilisateur en raison de ces changements. Vous pouvez le faire en veillant à préciser cette version de correctif (`x.y.z`) lorsque vous incluez Lock, ou en la téléchargeant.
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.
## Pour en savoir plus
Si vous cherchez de l’information plus détaillée pour personnaliser Lock pour votre application, consultez la page des [options de configuration](/docs/fr-ca/libraries/lock/lock-configuration) ou la page de l’[API Lock](/docs/fr-ca/libraries/lock/lock-api-reference) !
Si vous souhaitez l’ajout de certaines option de thème de personnalisation visuelle, 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 s’ajouteront.