El “dark mode” se ha vuelto una funcionalidad importante cuando publicamos aplicaciones o páginas web. Siempre que accedo a una app nueva lo primero que hago es buscar el botón del modo oscuro. Y si no está disponible no pensaron en el usuario al desarrollarla, lo que es un error.
Por eso decidí hacer esta guía para mostrar lo fácil que es implementar esta funcionalida. No tiene que ser un dolor de cabeza ni una carga ofrecerlo. En esta ocasión vamos a usar una de mis librerías de UI favoritas PrimeVue.
¿Qué es PrimeVue?
PrimeVue es una librería de UI que ofrece una gran variedad de componentes. Desde lo más simples como los botones, hasta los más complejos, como los data tables o gráficas. “Hay cientos de liberías que hacen esto.” puede que estes diciendo y con toda razón. Pero PrimeVue tiene una diferencia clave, puedes implementar diferentes estilos usando la misma librería. Si eres fan del estilo Material lo puedes implementar, si, por el contrario, prefieres el estilo de Tailwind, también lo puedes implementar. Incluso puedes implementarlo sin ninguna librería CSS.
PrimeVue ha hecho un excelente trabajo separando la funcionalidad de sus componentes del estilo. Esto permite poder manipular el estilo los componentes a tu gusto.
Implementa dark mode con PrimeVue
Suponiendo que ya tenemos un proyecto de Vue.js listo para trabajar podemos proceder con la instalación de PrimeVue como una dependencia en nuestro proyecto.
npm install primevue @primeuix/themes
Ahora tenermos que configurar nuestro main.js para inyectar PrimeVue a la instancia de Vue.
import { createApp } from 'vue';
import App from './App.vue';
import PrimeVue from 'primevue/config';
import Aura from '@primeuix/themes/aura';
const app = createApp(App);
app.use( PrimeVue, {
theme: {
preset: Aura,
options: {
darkModeSelector: '.darkMode'
}
}
});
app.mount('#app');
Ok, vamos a ver que estamos haciendo con este código. Primero importamos PrimeVue y el tema Aura, líneas 3 y 4. Este tema puede ser personalizado a tu gusto. Puedes ver más información sobre la personalización del tema aquí.
Luego, de la línea 8 a la 15, le decimos a Vue que vamos a usar PrimeVue. Ahí es donde le decimos a PrimeVue el tema que usaremos y cómo vamos a manejar el dark mode. En este caso decidimos usar una clase de CSS que llamamos darkMode.
Con esta configuración estamos diciendo que cuando querramos aplicar el dark mode a nuestra app solo tenemos que asignarle la clase de CSS darkMode al <body /> de la página.
Ya con esto podemos cambiar entre dark mode o light mode de manera rápida y sencilla. Vamos a crear una página de ejemplo para demostrarlo. Para esto podemos usar el archivo App.vue e insertar el siguiente código.
<template>
<main>
<div class="main">
<Button label="Aplicar dark mode" @click="toggle" />
</div>
</main>
</template>
<script>
import Button from 'primevue/button';
export default {
data: () => ({
isDarkMode : false,
}),
methods: {
toggle() {
if( this.isDarkMode )
document.documentElement.classList.remove('darkMode');
else
document.documentElement.classList.add('darkMode');
this.isDarkMode = !this.isDarkMode;
}
},
components: {
Button
}
}
</script>
<style scoped>
.main {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
</style>
Aquí simplemente importamos un botón de PrimeVue y lo vamos a utilizar para cambiar entre dark mode y light mode. Cada vez que el usuario presione el botón, la función toggle se encargará de aplicar o remover la clase que habíamos definido al body de nuestra página.
Y así de sencillo implementamos la funcionalidad de dark mode con PrimeVue. Así mismo puedes hacer una infinidad de cosas de manera fácil y rápida usando esta librería que se ha convertido en mi favorita.
Puedes encontrar todo mi código en este repositorio de GitHub.
¿Qué te pareció?
Déjame saber en los comentarios que si conocías esta librería y como la has utilizado en tus proyectos. O si tiene alguna otra librería que recomendarnos.
