Modo oscuro en CSS

Respetar el tema del sistema del lector, con un ajuste manual encima.

:root {
  --bg: #ffffff;
  --fg: #14161c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0c10;
    --fg: #e8e8ea;
  }
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --fg: #14161c;
}

body {
  background: var(--bg);
}

Cómo funciona

1. prefers-color-scheme reporta el ajuste del sistema operativo.
2. Guardar los colores en variables reduce el cambio a unas líneas.
3. Un atributo data-theme deja que un interruptor le gane al valor por defecto.

Palabras clave y builtins usados aquí

• background
• media

El intento, en números

Líneas

20

Caracteres a escribir

214

Tokens

60

Ritmo de tres estrellas

90 tpm

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

Escribe este fragmento

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

← Anterior Siguiente →