¿Quieres que tu aplicación cambie entre modo claro y oscuro con un solo clic? Implementar dark mode en SolidJS con Tailwind es más simple de lo que parece cuando combinas la reactividad de los signals con el helper dark que Tailwind ya trae incluido. Aquí verás cómo unir ambas piezas para que el toggle dependa de ti, no del sistema operativo del usuario.

Cómo configurar Tailwind para controlar el dark mode manualmente

Por defecto, cuando usas la clase dark: en Tailwind, el framework revisa las preferencias del dispositivo del usuario. Si su sistema está en modo oscuro, los estilos se aplican; si no, se ignoran. Esto está bien, pero te quita el control.

Para cambiar ese comportamiento, abre el archivo de configuración de Tailwind y agrega la propiedad darkMode. Esta acepta dos valores principales:

• media: detecta la preferencia del sistema operativo del usuario.
• class: aplica los estilos solo cuando un elemento padre o el propio elemento tienen la clase dark.

¿Qué hace darkMode: 'class' en Tailwind? Le dice a Tailwind que active los estilos dark: únicamente cuando exista la clase dark en el DOM, normalmente en el body o en un contenedor padre. Así tú decides cuándo aplicar el modo oscuro.

Con esta configuración, los estilos dark: ya no dependen del navegador, sino de una clase que tú vas a controlar con SolidJS.

Cómo crear el signal y el effect para el toggle de dark mode

La lógica reactiva vive en dos piezas: un signal que guarda el estado y un effect que reacciona al cambio para modificar el DOM.

Primero creas el signal con un valor inicial en false, porque quieres que la app arranque en modo claro:

js const [darkMode, setDarkMode] = createSignal(false);

Luego defines un effect que se ejecuta cada vez que el signal cambia. Dentro usas document.body.classList.toggle para añadir o quitar la clase dark del body:

js createEffect(() => { document.body.classList.toggle('dark', darkMode()); });

Este effect es la pieza clave: al leer darkMode() dentro de la función, Solid registra esa dependencia y vuelve a correr el bloque cada vez que el valor se actualiza. La clase entra y sale del body automáticamente.

Cómo conectar el botón con la función toggleDarkMode

Falta el disparador. Necesitas una función que invierta el valor del signal y un botón que la ejecute al hacer clic.

La función queda así:

js const toggleDarkMode = () => { setDarkMode(!darkMode()); };

Y en el botón con el icono de luna, agregas el evento:

jsx <button onClick={toggleDarkMode}>🌙</button>

Cada clic invierte el estado: si era false pasa a true, y viceversa. El effect detecta el cambio y actualiza el body al instante.

¿Por qué usar un effect en lugar de modificar el DOM directamente en el onClick? Porque el effect centraliza la lógica de sincronización entre estado y DOM. Si el signal cambia desde otro lugar, el DOM se mantiene consistente sin código duplicado.

Cómo aplicar los estilos dark a tu interfaz

Una vez que el toggle funciona, los estilos dependen de Tailwind. Donde quieras que algo cambie en modo oscuro, antepones el prefijo dark: a la utilidad.

Algunos ejemplos prácticos del ejercicio:

• En el contenedor principal: dark:bg-gray-600 para cambiar el fondo a gris oscuro.
• En el texto general: dark:text-white para que toda la tipografía dentro del contenedor pase a blanco.
• En el input: agregar border para que sea visible tanto en modo claro como oscuro, ya que el reset de Tailwind elimina los bordes por defecto.

Cuando haces hover sobre la clase dark: en Visual Studio Code, vas a notar que ya no aparece ninguna referencia a prefers-color-scheme. Solo verifica si existe la clase dark en un ancestro o en el propio elemento. Esa es la confirmación de que la configuración class está activa.

Qué entra y qué sale al activar el modo oscuro

Un detalle importante: solo cambian los elementos que tengan utilidades con prefijo dark:. Todo lo demás se queda igual. Por eso conviene revisar cada bloque visual y decidir qué transformación visual aplica:

• Fondos de contenedores.
• Color del texto.
• Bordes de inputs y botones.
• Estados hover o focus si quieres mantener contraste.

Esta granularidad te da control total sobre la experiencia visual, sin tener que escribir CSS personalizado.

El siguiente paso natural es el renderizado condicional: cambiar partes del DOM según el estado de un signal, no solo modificar clases. Cuéntame en los comentarios qué otros estados de UI te gustaría manejar con signals en tu próxima app con SolidJS.