Temas en CSS

Un juego de nombres, tres maneras de elegir valores: el sistema, una clase, un atributo.

:root {
  --paper: #ffffff;
  --ink: #1f2937;
  --edge: #e5e7eb;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #16181d; --ink: #e5e7eb; --edge: #2a2d34;
  }
}

:root[data-theme="dark"] {
  --paper: #16181d;
  --ink: #e5e7eb;
  --edge: #2a2d34;
}

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

Cómo funciona

1. El bloque por defecto es el tema claro; la media query es el oscuro del sistema.
2. Un data-theme explícito le gana al sistema, que es lo que un interruptor necesita.
3. Los componentes nunca mencionan un color, solo un token.

Palabras clave y builtins usados aquí

• background
• color
• media

El intento, en números

Líneas

19

Caracteres a escribir

324

Tokens

88

Ritmo de tres estrellas

90 tpm

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

Escribe este fragmento

Paso 1 de 2 en Temas y herramientas; paso 7 de 9 en Organizar el CSS.

← Anterior Siguiente →