Claro y oscuro sin duplicar en CSS

Declara los esquemas que soportas y deja que un solo juego de variables cambie.

:root {
  color-scheme: light dark;
  --paper: light-dark(#ffffff, #16181d);
  --ink: light-dark(#1f2937, #e5e7eb);
  --muted: light-dark(#64748b, #94a3b8);
  --edge: light-dark(#e5e7eb, #2a2d34);
}

body {
  background: var(--paper);
  color: var(--ink);
}

.card { border: 1px solid var(--edge); }
.card p { color: var(--muted); }

.panel { color-scheme: only light; }

Cómo funciona

1. color-scheme hace que los widgets propios del navegador sigan el tema.
2. light-dark() elige entre dos valores en una sola declaración.
3. Solo funciona donde color-scheme está definido, que suele ser la raíz.

Palabras clave y builtins usados aquí

• background
• border
• color
• px

El intento, en números

Líneas

17

Caracteres a escribir

356

Tokens

97

Ritmo de tres estrellas

90 tpm

Al ritmo de tres estrellas de 90 tokens por minuto, este intento toma unos 65 segundos.

Escribe este fragmento

Paso 3 de 3 en Otros medios; paso 12 de 13 en Dar estilo a componentes.

← Anterior Siguiente →