Dark mode en SolidJS con signals
Contenido del curso
Diego Díaz Mendaña
Kenneth Angulo L
Kenneth Angulo L
Para aquellos que estén usando la nueva versión de Tailwind, ya no se emplea el tailwind.config.js. En la documentación actual () en lugar de tener que añadir en el archivo tailwind.config.js la línea:
module.exports = { darkMode: 'class', // Otras configuraciones }
Hay que emplear, en el archivo index.css donde habíamos hecho el @import "tailwindcss", hay que añadir:
@custom-variant dark (&:where(.dark, .dark *));
Y ya funcionará bien. Recomiendo que revisen los cambios de la nueva documentación de Tailwind4 ya que han cambiado muchas cosas.
Ok, ya aplicamos esta primitiva para cambiar el tema del todo, ya quiero hacer persistir las notas pero vamos por partes.
¿Por qué es mejor usar darkMode 'class'?
Al configurar Tailwind con darkMode: 'class', tomas el control total de la experiencia del usuario. Por defecto, Tailwind utiliza la estrategia media, la cual lee las preferencias del sistema operativo del usuario. Aunque esto es útil, te quita la capacidad de ofrecer un botón manual en tu interfaz. Al cambiarlo a class, le indicas a Tailwind que solo active los estilos oscuros cuando un elemento padre (generalmente el body o el html) tenga explícitamente la clase dark. Esto te permite usar la reactividad de SolidJS con un Signal para inyectar o remover esa clase a voluntad, dándole al usuario la libertad de elegir el tema de tu aplicación independientemente de cómo tenga configurado su dispositivo.
