Crea una cuenta y continúa aprendiendo 🚀

Regístrate o inicia sesión para continuar aprendiendo:

Frontend Aprendiz

Dark & light theme

Veamos cómo Vuetify nos permite personalizar los colores de nuestra aplicación, escogiendo entre un tema oscuro y un tema claro.

Configuración del tema en Vuetify

A pesar de que hemos empezado a usar Vuetify, todavía el diseño no es tan bueno como quisiéramos.

Para mejorar esto, empecemos viendo qué es Theme Configuration.

Es posible configurar el tema de Vuetify. Cuando configuramos nuestra instancia de Vuetify, usamos la función createVuetify y le pasamos un objeto.

Este objeto soporta una propiedad theme, que es un objeto. Dentro de este podemos decidir si queremos usar el modo light o el modo dark.

Asignación de un tema por defecto

Actualmente, la función createVuetify recibe un objeto con componentes y directivas.

Vamos a agregar una propiedad más, según este ejemplo.

Si hacemos esto, asignaremos un tema por defecto a nuestro proyecto.

Al actualizar, los colores cambian. Los colores que se están usando vienen definidos en Vuetify.

Personalización de colores

Sin embargo, puedes personalizar los colores para tu tema light y para tu tema dark.

¿Cómo personalizar los colores?

Para ello, puedes crear un objeto que contenga:

Colores para el fondo.
Color primario y color primario oscuro.
Color secundario y color secundario oscuro.
Colores que representen error, información, éxito y warning.

Puedes definir un objeto de esta manera con tus colores light.

Luego, cuando vayas a crear tu instancia de Vuetify, puedes pasar tus temas dentro de un objeto themes.

Por ejemplo, si es un tema light, dark estará con el valor false.

Puedes crear otro objeto con el valor true y así personalizar tus colores para ambos modos.

De esta manera, tu aplicación tendrá los colores que prefieras, tanto en modo oscuro como en modo claro.

Cambio de tema en tiempo real

Vuetify proporciona un método para cambiar el tema de manera dinámica, similar a lo que indica su documentación.

Cuando hacemos clic en un botón, el tema cambia a light. Con otro clic, el tema cambia a dark.

Para esto, podemos usar el método useTheme que proporciona Vuetify.

Este ejemplo nos permite cambiar entre un color claro y un color oscuro.

Preferencias personales

A mí me agrada bastante la tonalidad oscura, así que voy a trabajar el proyecto de esta manera. Pero como mencioné, puedes personalizar los colores de tu aplicación según tus preferencias.

Esta lección no cuenta con recursos adicionales.

Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.

A pesar que hemos empezado a usar Vuetify, todavía el diseño no es tan bueno como quisiéramos. Para mejorar esto, empecemos viendo que es Theme Configuration. Es posible configurar el tema de Vuetify. Cuando nosotros configuramos nuestra instancia de Vuetify, nosotros usamos la función create Vuetify, y le pasamos un objeto. Este objeto soporta una propiedad Theme, que es un objeto. Y dentro de este nosotros podemos decidir si queremos usar el modo light o el modo dark. Entonces, lo que tenemos nosotros aquí es una función llamada Create Vuetify. Esta función Create Vuetify actualmente está recibiendo un objeto con componentes y con directivas. Nosotros vamos a agregar una propiedad más, según este ejemplo. Entonces, si hacemos esto, vamos a asignar un tema por defecto a nuestro proyecto. Al actualizar, los colores cambian. Los colores que se están usando vienen definidos en Vuetify. Sin embargo, tú puedes personalizar tus colores para tu tema light y para tu tema dark. ¿De qué manera se puede personalizar? Para ello puedes crear un objeto. Este objeto va a contener colores para el fondo, un color primario, un color primario oscuro, un color secundario, un color secundario oscuro, un color que representa el error, información, éxito, warning. Puedes definir un objeto de esta manera. Por ejemplo, con tus colores claros o light. Y luego, cuando vayas a crear tu instancia de Vuetify, puedes pasar aquí dentro de un objeto "themes", tus temas. Entonces, por ejemplo, en este caso, como es un color light, dark está con el valor de "false". Puedes crear otro objeto con el valor de true y de esta manera personalizar tus colores. tanto para tu tema light como para tu tema dark. De esta manera tu aplicación tendrá los colores que tú quieras, tanto en modo oscuro como en modo claro. Luego, Vuetify también nos proporciona un método para cambiar el tema. Similar a lo que su documentación tiene, ¿sí? Cuando nosotros hacemos clic en este botón se cambia un tema claro, cuando hacemos otro clic, se cambia un tema oscuro. Para esto nosotros podemos usar el método use theme, que Vuetify proporciona. Y esta sería la manera de usarlo, ¿sí? Este ejemplo nos permite cambiar entre un color claro y oscuro. Entonces, a mí me grada bastante la tonalidad oscura, así que voy a trabajar el proyecto de esta manera. Pero como te comento, tú puedes personalizar los colores de tu aplicación.