> ## 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.
> Personalizar la apariencia de tu widget Lock puede ser importante para la marca y para mantener una interfaz de usuario coherente, y este recurso destaca las distintas formas de hacerlo al implementar Lock en tu proyecto.
# Personalización de la interfaz de usuario de Lock
Puedes personalizar la apariencia de tu widget Lock de varias maneras. La mejor y más segura de hacerlo es mediante las opciones de JavaScript disponibles.
## Opciones de JavaScript
Puedes configurar varias personalizaciones de tu Lock mediante el parámetro `options` cuando lo instancies. Algunas te permiten personalizar la interfaz de usuario. Las opciones de personalización de la interfaz de usuario aún están en desarrollo; esperamos ir añadiendo más con el tiempo.
Primero, definirás el objeto `options`, con las opciones que quieras personalizar. Luego, deberás incluir ese objeto `options` como tercer parámetro al instanciar Lock; encontrarás más información al respecto más abajo.
### Opciones de tema
Actualmente hay un par de opciones de tema disponibles, agrupadas bajo la propiedad `theme`.
#### logo {String}
El valor de `logo` es la URL de una imagen que se colocará en el encabezado de Lock y que, de forma predeterminada, será el logotipo de Auth0. La resolución mínima recomendada es de 200 píxeles (ancho) por 200 píxeles (alto).
```js lines theme={null}
var options = {
theme: {
logo: 'https://example.com/logo.png'
}
};
```
#### primaryColor {String}
La propiedad `primaryColor` define el color principal de Lock; a partir de él se calcularán todos los colores usados en el widget. Esta opción resulta útil cuando se proporciona un `logo` personalizado, para asegurar que todos los colores armonicen con la paleta de colores del `logo`. El valor predeterminado es `#ea5323`.
```js lines theme={null}
var options = {
theme: {
logo: 'https://example.com/logo.png',
primaryColor: '#31324F'
}
};
```
#### authButtons `{Object}`
Permite personalizar los botones de Lock. Cada conexión personalizada cuyo botón quiera personalizarse debe indicarse por nombre, cada una con su propio conjunto de parámetros. Los parámetros que se pueden personalizar se enumeran a continuación:
* **displayName** \{String}: El nombre que se mostrará en lugar del nombre de la conexión al generar el título del botón, por ejemplo, `INICIAR SESIÓN CON MYCONNECTION` para el inicio de sesión).
* **primaryColor** \{String}: El color de fondo del botón. El valor predeterminado es `#eb5424`.
* **foregroundColor** \{String}: El color del texto del botón. El valor predeterminado es `#FFFFFF`.
* **icon** \{String}: La URL del icono de esta conexión. Por ejemplo: `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",
}
}
}
};
```
### Personalización del texto
La opción `languageDictionary` permite personalizar todos los textos que se muestran en Lock. El valor predeterminado es {}. Consulte el ejemplo a continuación.
```js lines theme={null}
var options = {
languageDictionary: {
emailInputPlaceholder: "something@youremail.com",
title: "Log me in"
},
};
```
Para ver una lista completa de los elementos que se pueden personalizar con `languageDictionary`, consulte la [especificación del diccionario de idioma inglés](https://github.com/auth0/lock/blob/master/src/i18n/en.js) en el repositorio.
### Instanciar Lock
Por último, instancie Lock con el objeto `options` que definió con sus opciones personalizadas.
`var lock = new Auth0Lock('{yourClientId}', '{yourDomain}', options);`
## Sobrescritura de CSS
No se recomienda personalizar Lock sobrescribiendo su CSS. El problema es que, con las nuevas versiones de Lock, algunos estilos pueden cambiar, lo que puede provocar problemas no deseados si sobrescribe el CSS. Además, es fácil pasar por alto el uso de estilos en otras partes y, aunque el cambio pueda verse bien en una vista, puede que no se vea bien en otra.
Si aun así desea sobrescribir el CSS para seguir personalizando Lock, le recomendamos usar una versión de parche específica de Lock en lugar de una versión mayor o menor, para limitar la cantidad de resultados inesperados que pueden producirse al modificar los estilos y, posteriormente, desplegarse otro parche que podría causar un comportamiento imprevisto en su interfaz de usuario debido a esos cambios. Esto puede hacerse asegurándose de especificar esa versión de parche (`x.y.z`) al incluir Lock o al descargarlo.
Además, por supuesto, le recomendamos que pruebe exhaustivamente los cambios en el CSS para asegurarse de que la experiencia sea la que pretende ofrecer a sus clientes.
## Más información
Si buscas información más detallada para personalizar Lock en tu aplicación, consulta la página de [opciones de configuración](/es/docs/libraries/lock/lock-configuration) o la página de la [API de Lock](/es/docs/libraries/lock/lock-api-reference).
Si hay opciones de tema específicas que te gustaría que se añadieran, háznoslo saber. Estamos trabajando para mejorar las opciones de personalización disponibles a través de JavaScript, y esta lista se actualizará a medida que se incorporen nuevas opciones.