Como hacer un modo oscuro con Tailwind.css, Next.js y React en una sola página.
by Lara Alonso
¿Pero, para qué quiero yo incluir en mi web un tema oscuro?
Los temas oscuros permiten relajar la vista y a menudo muchos visitantes y programadores tienen toda su configuración en tema oscuro, resultando muy molesto visitar páginas que no respeten este esquema de colores por el alto contraste entre unas y otras páginas.
Lo primero, debes crear el Toogle para elegir el modo oscuro o claro
Recuerda que este proyecto está hecho en Next.js con React. Y ¿por qué me dices esto?
1- Un botón es un componente que puede utilizar un cliente. Si recuerdas en Next.js 13 todos los componentes están renderizados en el servidor. Y esto significa que, salvo que tu le indiques que es un " useclient ", es decir; un componente que va a utilizar el cliente, te devolverá un error ya que el botón pertenece a la parte cliente.
Por lo tanto creamos un componente nuevo en nuestra carpeta components que se llamará toogle.jsx y después lo importaremos en la páginas que nos gustaría utilizarlo.
2- Nuestro componente está creado en React por lo que hay que corregir el nombre de los elementos que nos proporciona Tailwind.css. En este enlace os dejo el código de tailwind.css para el toogle. Y ahora os muestro el optimizado para React. Los iconos son de heroicons.
Tienes todo el código en este enlace.
import {useState} from ¨react¨import {Switch} from ¨@headlessui/react¨
function classNames (...classes ) {return classes.filter(Boolean).join(" ")}
export default function Toogle ( ) {
const [enabled, setEnabled] = useState(false);
return (‹ div className="flex justify-end gap-1" ›‹svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"strokeWidth="1.5" stroke="currentColor" className="w-6 h-6"› ‹path strokeLinecap=" round" strokeLinejoin="round"d=" M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" /››‹/svg ›
‹ Switchchecked={enabled}onChange={setEnabled}className={ classNamesenabled ? "bg-indigo-600" : "bg-gray-200","relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2") }
‹ span className="sr-only"› Use setting ‹/span›‹ span aria-hidden = " true "className={ classNamesenabled ? "translate-x-5" : "translate-x-0","pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out") }/›‹ /Switch ›
‹svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"strokeWidth="1.5" stroke="currentColor" className="w-6 h-6"› ‹path strokeLinecap=" round" strokeLinejoin="round"d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z " /››‹ /svg ›‹ /div ›);
3- Solo faltaría añadirle los ternarios a los elementos que recesitan un cambio de color en la página. Por ejemplo
‹ div className=classNames(!enabled? "bg-black": "bg-fuchsia-900" )} ›
Podrías añadir el modo oscuro a toda tu web, configurando un tema de Tailwind.css, te dejo un enlace para que puedas ver como hacerlo.
Listo ¡¡¡¡¡ Si has llegado hasta aquí y quieres saber como añadir filtros a tu Blog creado en Next.js o React puedes leer mi post
Lara Alonso @aiadevop
Soy desarrolladora de software en España. Especializada en frontend, creo experiencias web y aplicaciones. Explora mi portfolio y descubre mis proyectos.
¡Tu visión mi código!