Degradados en modo oscuro: profundidad sin deslumbrar

Los degradados en modo oscuro se ven mejor cuando les das sus propios colores en lugar de reutilizar los del tema claro. Sobre un fondo oscuro el ojo se adapta y cada color saturado parece más brillante, así que un degradado que resultaba tranquilo sobre blanco empieza a deslumbrar. Baja el croma, limita el color vivo a zonas pequeñas, tinta el fondo en lugar de usar negro puro y cambia los valores con prefers-color-scheme o light-dark(). La profundidad se queda; el deslumbramiento se va.

Por qué los degradados del tema claro fallan en oscuro

Cuando la página se vuelve oscura cambian tres cosas. Las zonas grandes y luminosas pasan a ser lo más brillante de la habitación, y se leen como deslumbramiento y no como color. Las sombras dejan de funcionar, así que los degradados que daban profundidad oscureciendo los bordes la pierden. Y los saltos entre tonos oscuros se ven con más facilidad, de modo que los degradados sutiles empiezan a formar bandas. Diseño en modo oscuro cubre el tema en general; esta página trata de los degradados.

Cinco reglas para degradados en modo oscuro

1. 1

   Tinta el fondo

   Usa un casi negro que tienda hacia tu tono, como #0b0a14 para marcas violetas, en lugar de #000000. El negro puro hace que el color parezca pegado encima.

2. 2

   Baja el croma

   Reduce la saturación aproximadamente un tercio en las zonas grandes. En OKLCH, mantén el tono y reduce el valor C.

3. 3

   Reduce la parte luminosa

   Deja que el color vivo ocupe una esquina o un resplandor, y que la mayor parte de la superficie se quede cerca del fondo.

4. 4

   Eleva, no sombrees

   Muestra la elevación con superficies algo más claras y degradados que se aclaran hacia arriba, porque las sombras desaparecen sobre fondos oscuros.

5. 5

   Añade grano

   Un ruido fino rompe los saltos visibles de las mezclas oscuras. Degradados con grano tiene la receta.

Cambiar degradados con prefers-color-scheme

Guarda en propiedades personalizadas los colores del degradado, no degradados completos. Así el tema oscuro solo tiene que redefinir los colores, y todos los componentes que los usan se actualizan. Es el mismo patrón que se describe en variables CSS para temas.

:root {
  color-scheme: light dark;
  --ground: #faf8ff;
  --glow: #c4b5fd;
  --glow-2: #f9a8d4;
  --hero: radial-gradient(circle at 80% 15%, var(--glow) 0%, transparent 45%),
          radial-gradient(circle at 10% 90%, var(--glow-2) 0%, transparent 50%),
          var(--ground);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b0a14;
    --glow: #4c1d95;
    --glow-2: #1e3a8a;
  }
}

.hero {
  background: var(--hero);
}

Fíjate en que los resplandores oscuros son más profundos, no más brillantes. Sobre un fondo oscuro, a un color le basta con ser un poco más claro que su entorno para leerse como luz.

Usar light-dark()

La función light-dark() devuelve su primer color en un esquema claro y el segundo en uno oscuro. Necesita color-scheme: light dark en el elemento o en un ancestro, y funciona en las versiones actuales de Chrome, Edge, Safari y Firefox. Mantiene ambos valores en una sola línea, lo que facilita revisar una paleta.

:root {
  color-scheme: light dark;
}

.card {
  background: linear-gradient(
    180deg,
    light-dark(#ffffff, #1a1530) 0%,
    light-dark(#f5f3ff, #0b0a14) 100%
  );
  color: light-dark(#1e1b2e, #e9e5f5);
}

Admitir un selector de tema manual

Muchos sitios permiten anular la configuración del sistema. Pon la elección en el elemento raíz y limita tus variables a ella. La media query se encarga del valor por defecto; el atributo manda cuando alguien elige.

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0b0a14;
  --glow: #4c1d95;
  --glow-2: #1e3a8a;
}

:root[data-theme="light"] {
  color-scheme: light;
}

Reajustar un degradado para el modo oscuro

Aquí tienes el mismo degradado de marca ajustado parada a parada. Trabajar en OKLCH lo hace predecible, porque la luminosidad y el croma son números separados; OKLCH explicado muestra por qué.

Texto sobre degradados oscuros

El texto claro sobre un degradado oscuro suele tener contraste de sobra, pero compruébalo donde el degradado es más brillante, no donde es más oscuro. Un titular en #e2e8f0 sobre #0b0a14 queda muy por encima del 4,5:1 que WCAG pide para el texto; el mismo titular sobre un resplandor violeta intenso quizá no. Evita también el texto blanco puro en párrafos sobre casi negro: un contraste muy alto provoca halos para algunos lectores, así que un blanco roto suave es más amable. Contraste de color y accesibilidad tiene las cifras.

Para más paletas oscuras, fondos degradados oscuros tiene una serie para copiar. Y en publicaciones para redes y presentaciones, donde no puedes probar cada línea a mano, la tinta automática de Gradiently elige texto claro u oscuro línea a línea a partir de la propia paleta del Mark, y el Mark coloca su zona más tranquila detrás de las palabras, así que un diseño oscuro nunca pone un titular sobre su resplandor más brillante.