Conceptos clave
Uso de variantes para dar estilo a tu sitio en modo oscuro.
Ahora que el modo oscuro es una característica de primer nivel en muchos sistemas operativos, es cada vez más común diseñar una versión oscura de tu sitio web para acompañar el diseño predeterminado.
Para hacerlo lo más fácil posible, Tailwind incluye una variante dark que te permite dar estilo a tu sitio de manera diferente cuando el modo oscuro está habilitado:
Modo claro
Escribe al revés
El bolígrafo Zero Gravity se puede usar para escribir en cualquier orientación, incluso al revés. Incluso funciona en el espacio exterior.
Modo oscuro
Escribe al revés
El bolígrafo Zero Gravity se puede usar para escribir en cualquier orientación, incluso al revés. Incluso funciona en el espacio exterior.
<div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5"> <div> <span class="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg"> <svg class="h-6 w-6 stroke-white" ...> <!-- ... --> </svg> </span> </div> <h3 class="text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight ">Escribe al revés</h3> <p class="text-gray-500 dark:text-gray-400 mt-2 text-sm "> El bolígrafo Zero Gravity se puede usar para escribir en cualquier orientación, incluso al revés. Incluso funciona en el espacio exterior. </p></div>De forma predeterminada, esto utiliza la característica de medios CSS prefers-color-scheme, pero también puedes compilar sitios que admitan la alternancia manual del modo oscuro al anular la variante dark.
Si deseas que tu tema oscuro sea impulsado por un selector CSS en lugar de la consulta de medios prefers-color-scheme, anula la variante dark para usar tu selector personalizado:
@import "tailwindcss";@custom-variant dark (&:where(.dark, .dark *));Ahora, en lugar de que las utilidades dark:* se apliquen según prefers-color-scheme, se aplicarán siempre que la clase dark esté presente en una de las etiquetas superiores en el árbol HTML:
<html class="dark"> <body> <div class="bg-white dark:bg-black"> <!-- ... --> </div> </body></html>La forma en que agregues la clase dark al elemento html depende de ti, pero un enfoque común es usar un poco de JavaScript que actualice el atributo class y sincronice esa preferencia en algún lugar como localStorage.
Para usar un atributo de datos en lugar de una clase para activar el modo oscuro, simplemente anula la variante dark con un selector de atributos:
@import "tailwindcss";@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));Ahora, las utilidades del modo oscuro se aplicarán cada vez que el atributo data-theme esté configurado en dark en una de las etiquetas superiores del árbol:
<html data-theme="dark"> <body> <div class="bg-white dark:bg-black"> <!-- ... --> </div> </body></html>Para compilar selectores de temas de tres vías que admitan el modo claro, el modo oscuro y el tema del sistema, utiliza un selector de modo oscuro personalizado y la API window.matchMedia() para detectar el tema del sistema y actualizar el elemento html cuando sea necesario.
Aquí hay un ejemplo simple de cómo puedes admitir el modo claro, el modo oscuro y respetar la preferencia del sistema operativo:
// Al cargar la página o al cambiar de tema, es mejor agregarlo en línea en el `head` para evitar FOUCdocument.documentElement.classList.toggle( "dark", localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),);// Cada vez que el usuario elige explícitamente el modo clarolocalStorage.theme = "light";// Cada vez que el usuario elige explícitamente el modo oscurolocalStorage.theme = "dark";// Cada vez que el usuario elige explícitamente respetar la preferencia del sistema operativolocalStorage.removeItem("theme");Nuevamente, puedes administrar esto como quieras, incluso guardando la preferencia en el lado del servidor en una base de datos y renderizando la clase en el servidor; depende totalmente de ti.