Implementación de Dark Mode con SolidJS y TailwindCSS

¿Cómo implementar Dark Mode en tu aplicación con SolidJS y Tailwind?

Sumérgete en el fascinante proceso de implementar un sistema de Dark Mode en tu aplicación usando SolidJS y Tailwind. Este enfoque no solo es eficiente sino que también te proporcionará un control total sobre el modo de visualización de la interfaz de usuario. ¡Vamos al grano!

¿Qué necesitamos para comenzar?

Para implementar Dark Mode con Tailwind, necesitas incluir algunas configuraciones clave en tu proyecto. Tailwind facilita el uso de clases específicas que adaptan la apariencia según el modo de visualización.

1. Configuración de Tailwind: Dirígete a la configuración de Tailwind y agrega la opción de Dark Mode con el valor class.

   // tailwind.config.js
   module.exports = {
     darkMode: 'class',  // 'media' o 'class'
     // más configuraciones...
   }

   Esto te permitirá controlar el modo Dark manualmente sin depender de las preferencias del dispositivo del usuario.

¿Cómo funcionarán los signals y los effects?

Los signals y los effects son la clave para lograr la reactividad en SolidJS. Vamos a usarlos para controlar el modo Dark de nuestra aplicación de manera eficiente.

1. Creación de un Signal: Inicia creando un signal que mantendrá el estado del Dark Mode.

   import { createSignal } from "solid-js";
   
   const [darkMode, setDarkMode] = createSignal(false);

   El signal darkMode empieza como false, indicando el modo claro por defecto.

2. Definición del Effect: Luego, definimos un effect para modificar la clase del body según el estado del Signal.

   import { createEffect } from "solid-js";
   
   createEffect(() => {
     document.body.classList.toggle("dark", darkMode());
   });

   Este effect se activa cada vez que el valor de darkMode cambia, alternando la clase dark en el body del documento.

¿Cómo alternar el modo Dark con un botón?

Uno de los aspectos más intuitivos para los usuarios es poder cambiar entre modos claro y oscuro con un botón. Implementar esta lógica es bastante sencillo.

1. Crear una Función de Toggle: Implementa una función que cambie el estado del signal cada vez que el botón sea presionado.

   function toggleDarkMode() {
     setDarkMode(!darkMode());
   }

2. Configurar el Evento al Clic: Asocia el toggle del modo Dark a un botón en la interfaz.

   <button onclick={toggleDarkMode}>
     Cambiar Modo
   </button>

   ¡Y listo! Con solo un clic, podrás alternar entre modos.

¿Cómo personalizar el fondo y texto?

Para ajustar otros elementos de nuestro diseño, como contenedores y textos, Tailwind ofrece utilidades que se adaptan al modo actual de visualización.

1. Modificar el Contenedor: Cambia el fondo y el color del texto según el estado del modo Dark.

   <div class={`container ${darkMode() ? 'bg-gray-600 text-white' : 'bg-slate-800 text-black'}`}>
     <!-- contenido -->
   </div>

   Al hacer el toggle, verás cómo se ajustan el fondo y el texto del contenedor principal.

2. Detalles visuales adicionales: No olvides agregar un borde a elementos como inputs, para mejorar su visibilidad en ambos modos.

   <input type="text" class="border">

Implementar y mejorar la experiencia del usuario con el modo Dark no solo es beneficioso para la accesibilidad, sino que también aporta un plus visual a tu aplicación. Continúa explorando y experimentando con SolidJS y Tailwind para descubrir nuevas formas de optimizar tu proyecto. ¡Un futuro brillante (o oscuro, en modo de luz) te aguarda en el mundo del desarrollo web!