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.

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.

¿Tienes dudas?

Publicar pregunta

¡Comparte conocimiento!

X

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos











































43

Dark & light theme

















































































Espera un momento ...

¿Te gustaría llevar mi curso de Laravel, gratis?

Sólo debes ingresar tus datos: