Dark & light theme

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.

Crea una cuenta y continúa aprendiendo 🚀

Dark & light theme