Cambiando de Tema Claro a Oscuro con Tailwind CSS y Reconociendo la Configuración del Sistema
¡Hey Coders! Bienvenidos a este tutorial sobre cómo implementar un cambio de tema de claro a oscuro usando Tailwind CSS. Tailwind, con su enfoque de proveer clases como utilidades, nos permite construir interfaces de usuario rápidamente y con gran flexibilidad. Una de las características más solicitadas en las aplicaciones modernas es la capacidad de cambiar entre un tema claro y oscuro, y además, adaptarse automáticamente al tema preferido del sistema del usuario.
Así que en este tutorial, aprenderás:
- Cómo construir estilos tanto para temas claros como oscuros con Tailwind.
- Cómo permitir a los usuarios alternar entre estos temas manualmente.
- Cómo detectar automáticamente el tema preferido del sistema y ajustar tu aplicación en consecuencia.
Ya sea que estés construyendo una aplicación web desde cero o simplemente desees integrar la funcionalidad de cambio de tema en un proyecto existente, ¡este tutorial es para ti!
Y aunque en este caso nos enfocaremos en React usando Vitejs, esto mismo funciona desde Nextjs, Remix, u otros Formas de usar React.
Comencemos.
Cambiando de Tema con Tailwind
En Tailwind, facilitar la transición entre los temas es sorprendentemente sencillo. Solo necesitas usar el prefijo dark: en las clases correspondientes.
Por ejemplo, si quieres que un fondo sea blanco en el tema claro y negro en el tema oscuro, puedes hacerlo de la siguiente manera:
<div class="bg-white dark:bg-black">
Contenido de tu div.
</div>
Pero para entenderlo mejor vayamos paso a paso, creando un proyecto.
creacion de proyecto
Vamos a crear nuestro proyecto de React usando Vitejs:
npm create vite
- Nombre del proyecto: react-tailwind-darkmode
Una vez creado puedes ejecutar los siguientes comandos:
cd react-tailwind-darkmode
npm install
npm run dev
Algunos pasos adicionales que haremos, una vez creado el proyecto son:
- Elimina el archivo
App.css - Quita todo el contenido del archivo
index.css - y Deja el contenido del archivo
App.jsxde la siguiente forma:
function App() {
return (
<div>App</div>
)
}
export default App
Una vez hecho esto vamos a pasar a crear una interfaz sencilla.
Instalación de Tailwind
Lo siguiente que vamos a hacer es instalar Tailwind, puedes guiarte de la Documentación oficial de Tailwind para Vitejs
Creación de interfaz en modo Light
Primero empecemos creando una UI en modo Light. Coloca el siguiente código en App.jsx:
function App() {
return (
<div className="h-screen flex justify-center items-center">
<button className="bg-slate-200 px-4 py-2 rounded hover:bg-slate-300">
Change Theme
</button>
</div>
);
}
export default App;
Dark Mode Basado en class
Para empezar a usar Tailwind es necesario activar el modo oscuro basado en clase, esto nos permitirá cambiar de tema desde nuestra interfaz de usuario.
ve en tailwind.config.js y añade lo siguiente:
/** @type {import('tailwindcss').Config} */
export default {
...
darkMode: "class",
...
};
Ahora, en lugar de que las clases dark:{class} se apliquen según el esquema de color preferido del sistema, se aplicarán siempre que la clase dark esté presente anteriormente en el árbol HTML.
Por ejemplo actualicemos los estilos de nuestro App.jsx:
function App() {
return (
<div className="h-screen flex justify-center items-center dark:bg-zinc-900">
<button className="bg-slate-200 px-4 py-2 rounded hover:bg-slate-300 dark:bg-slate-950 dark:text-white dark:hover:bg-slate-800">
Change Theme
</button>
</div>
);
}
export default App;
Aqui hemos añadido las clases dark:, pero si miras tu aplicacion estas no tienen efecto.
Asi que estas solo se aplicaran si nosotros añadimos una clases llamada dark en el contenedor de la aplicación como puede ser la etiqueta body por ejemplo. Intenta añadir en tu archivo public/index.html la siguiente clase:
<body class="dark">
...
</body>
Aplicando esta clase, las clases dark: son usadas.
Creando boton interactivo
Ahora para cambiar de tema solo tenemos que usar un boton que sea capaz de añadir o quitar esa clase. Actualicemos el código de App.jsx:
import { useEffect, useState } from "react";
function App() {
const [theme, setTheme] = useState("light");
useEffect(() => {
if (theme === "dark") {
document.querySelector("html").classList.add("dark");
} else {
document.querySelector("html").classList.remove("dark");
}
}, [theme]);
const handleChangeTheme = () => {
setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
};
return (
<div className="h-screen flex justify-center items-center dark:bg-zinc-900">
<button
className="bg-slate-200 px-4 py-2 rounded hover:bg-slate-300 dark:bg-slate-950 dark:text-white dark:hover:bg-slate-800"
onClick={handleChangeTheme}
>
Change Theme
</button>
</div>
);
}
export default App;
Aqui estoy usando un evento Click para cambiar el estado de theme y un useEffect para que ejecute el la actualización de la etiqueta body en el index.html cada vez que cambie el estado de theme.
Y Listo con esto ya tienes creado tu cambio de Tema en Tailwind desde React.
Más Recursos
- Más detalles y ejemplos pueden encontrarse en la documentación oficial: Dark Mode en Tailwind CSS.
- https://stackoverflow.com/questions/68400074/how-to-apply-transition-effects-when-switching-from-light-mode-to-dark-in-tailwi