Modo oscuro

Resumen

Ahora que el modo oscuro es una característica de primera clase 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 estilizar tu sitio de manera diferente cuando el modo oscuro está habilitado:

Modo claro

Escribe al revés

El Zero Gravity Pen 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 Zero Gravity Pen 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 ">Writes upside-down</h3>
  <p class="text-gray-500 dark:text-gray-400 mt-2 text-sm ">
    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
  </p>
</div>

Por defecto, esto usa la característica de media CSS prefers-color-scheme, pero también puedes construir sitios que soporten activar/desactivar el modo oscuro manualmente sobrescribiendo la variante dark.

Activar/desactivar el modo oscuro manualmente

Si quieres que tu tema oscuro sea impulsado por un selector CSS en lugar de la media query prefers-color-scheme, sobrescribe la variante dark para usar tu selector personalizado:

app.css

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

Ahora, en lugar de que las utilidades dark:* se apliquen basadas en prefers-color-scheme, se aplicarán siempre que la clase dark esté presente antes en el árbol HTML:

HTML

<html class="dark">
  <body>
    <div class="bg-white dark:bg-black">
      <!-- ... -->
    </div>
  </body>
</html>

Cómo 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.

Usando un atributo de datos

Para usar un atributo de datos en lugar de una clase para activar el modo oscuro, simplemente sobrescribe la variante dark con un selector de atributo:

app.css

@import "tailwindcss";
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

Ahora las utilidades de modo oscuro se aplicarán siempre que el atributo data-theme esté establecido en dark en algún lugar superior del árbol:

HTML

<html data-theme="dark">
  <body>
    <div class="bg-white dark:bg-black">
      <!-- ... -->
    </div>
  </body>
</html>

Con soporte para el tema del sistema

Para construir interruptores de tema de tres vías que soporten modo claro, modo oscuro y el tema de tu sistema, usa 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í tienes un ejemplo simple de cómo puedes soportar el modo claro, el modo oscuro, así como respetar la preferencia del sistema operativo:

spaghetti.js

// Al cargar la página o al cambiar temas, es mejor agregarlo en línea en `head` para evitar FOUC
document.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 claro
localStorage.theme = "light";
// Cada vez que el usuario elige explícitamente el modo oscuro
localStorage.theme = "dark";
// Cada vez que el usuario elige explícitamente respetar la preferencia del SO
localStorage.removeItem("theme");

Nuevamente, puedes administrar esto como quieras, incluso almacenando la preferencia en el lado del servidor en una base de datos y renderizando la clase en el servidor — depende totalmente de ti.

Resumen

Activar/desactivar el modo oscuro manualmente

Usando un atributo de datos

Con soporte para el tema del sistema

En esta página