Habilitar el Dark Mode o modo oscuro en Tailwind + Laravel y Vue - 2 FORMAS
Te voy a mostrar Cómo puedes habilitar el modo oscuro en telwin independientemente si estás empleando Laravel y Vue o en mi caso ambos esto es un proyecto Laravel que tengo un apartado con Vue y obviamente aquí estoy empleando clases de Tailwind es una característica de telwin es lo primero que tienes que tener en mente aquí por supuesto estamos empleando un proyecto node con todo lo que esto implica y con esto cuando instalamos Tailwind podemos exponer lo que es el archivo de configuración que no lo veo aquí está:
tailwind.config.js
module.exports = {
darkMode: 'class',
// ...
}Entonces a partir de aquí tenemos dos caminos:
Uno es forzarlo para que siempre se esté empleando el modo oscuro en tu aplicación de manera por defecto y no lo puedas deshabilittar a menos que vuelvas aquí a cambiar la configuración; usualmente este es el que no queremos ya que usualmente. Si quieres el modo oscuro es que también quieres tener habilitado el modo claro o al menos dar la opción que es más que todo lo que quiero tratar Entonces si quieres Por más que sea habilitar a fuerzas en modo oscuro simplemente lo colocas por aquí colocas Dark Mode y aquí colocas
cuando instalamos Tailwind podemos exponer lo que es el archivo de configuración que no lo veo aquí está:
tailwind.config.js
module.exports = {
darkMode: 'class',
// ...
}Por selección del usuario
Eso sería prácticamente todo pero si lo quieres colocar opcional que es la parte más interesante ya la cosa cambia un poquito es muy sencillo lo primero que te quiero comentar lo primero que tienes que hacer aquí es habilitar por acá colocar aquí class dark:
<html class="dark">Esto es simplemente una función que disparo mediante un evento y modifico así el html entonces aquí lo primero es que si estás empleando Vue puedes también emplear los selectores sin ningún problema ya que bueno no estamos aquí utilizando algo de que este se encuentra aquí definido a nivel de este componente es directamente el html entonces aquí hago el toggle tal cual puedes ver aquí la propiedad que me indica en qué modo estoy eso sería prácticamente todo por lo demás aquí yo disparo esto por aquí arriba en un evento click de un botoncito que tengo bueno ya te lo muestro con un cbg Y eso sería todo Y a partir de ahí esa propiedad que te mostraba puede utilizarla para bueno cambiarle color por ejemplo al iconito para que se entienda ahí al menos de momento lo tengo de esta forma pero entonces cómo cambiamos el qué color de fondo cómo se define etcétera:
<button class="translate-y-1" @click="darkModeToggle">***
darkModeToggle() {
document.querySelector("html").classList.toggle("dark");
this.isDarkMode = !this.isDarkMode
},Ahí es donde entra aparte lo primero que tienes que tener en mente es lo comentado que es que tienes que colocar aquí clase dar para que actives el modo oscuro y si no quieres el modo oscuro simplemente lo quitas y es por eso que tenía aquí el el Script que te mostraba antes por lo tanto en mi caso por defecto se muestra el modo oscuro pero se lo quito es muestra el modo claro y esto lo podemos emular mediante javascript que era lo comentado Entonces lo primero es la clase para Activar el modo oscuro pero lo interesante de aquí es que es opcional entonces Cómo podemos definir Qué colores queremos para el modo oscuro muy fácil simplemente.
Ahora tienes que agregar para el estilo que tú quieres aplicar específicamente para el modo oscuro agregas el prefijo de dar dos puntos y el color que quieras emplear en este caso es para un texto un enlace que aparece aquí que dice ver en Academia que tiene esto y aparece en color blanco que es que yo tengo por acá Fíjate que si lo quito entonces va a tomar el color que tiene por defecto que sería aquí en morado que como es muy oscuro Entonces lo coloqué mejor en en blanco y el morado es el que se emplea aquí en el modo bueno en el modo light Por así decirlo y es simplemente eso Simplemente tienes que ir yendo componente por componente e ir agregando esta clase pero qué pasa si el estilo lo tienes en una hoja de estilo también lo puedes hacer sin problemas por aquí Busco simplemente por ejemplo en este caso Yo tengo un estilo para una carta y aquí lo colocas tal cual colocas tal y el color que tú quieres emplear en modo oscuro y eso sería todo Y a partir de aquí obviamente si yo por ejemplo estoy aquí en modo claro y empiezo a navegar como es una aplicación spa con Vue funciona correctamente pero si recargo ya vuelve al modo oscuro para hacer esto persistente y ahí tienes que emplear las características de la tecnología que estés empleando que ya es capa de telwin si es Vue puedes emplear una Cookie o directamente el almacenamiento del navegador Hay muchas formas el navegador tiene como tres cuatro formas de almacen datos de manera persistente o en el caso del árabe que creo que es como yo lo voy a hacer Voy a almacenarlo en base de datos y lo traigo con información del usuario autenticado así que pues nada. Eso era lo que te quería hablar y sin más que decir nos vemos en otro video
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter