useDarkMode Hook con Tailwind CSS

Ya te he subido otros videos donde te muestro cómo usar el dark y el light mode del tema de Tailwind.

En estete muestro un custom Hook que cambia el nodo superior directamente y se puede reutilizar en todo el sitio.

jsx

import { useState } from "react";export default function useTheme() {  const [theme, setTheme] = useState("light");  const toggleTeam = () => {    const newTheme = theme === "light" ? "dark" : "light";    document.documentElement?.classList.remove("dark", "light");    document.documentElement?.classList.add(newTheme);    setTheme(newTheme);  };  // podemos agregar guardado en... localstorage? cookies?  return { theme, toggleTeam };}

Puedes observar que es solo el inicio, podrías agregar localStorage o guardar el theme en una cookie.

🎬 ¿Te está gustando este contenido? Tenemos más tutoriales en video en nuestro canal de YouTube.

jsx

export default function Index() {  const { theme, toggleTeam } = useTheme();  return (    <div className="flex flex-col min-h-screen main dark:bg-indigo-950 max-w-sm px-4">      <h2 className="dark:text-white">Cambia el tema</h2>      <button        onClick={toggleTeam}        className="bg-blue-500 text-white texy-2xl p-4 dark:bg-indigo-500 rounded-lg"      >        Cambiar a {theme === "light" ? "dark" : "light"}      </button>    </div>  );}

Ahora podemos usar nuestro custom Hook en cualquier parte de nuestra aplicación.

Puedes ver que el nodo superior cambia la clase entre light y dark.

useDarkMode Hook con Tailwind CSS

Héctorbliss

Mira el video:

Video

Streaming Server-Side Rendering o Renderizado del lado del servidor con Streams. Explicado

Checa este otro Post

Custom Hooks en React: Guía completa con ejemplos

Checa este otro Post

Animaciones web con React + Motion 🧙🏻