CSS

Modo oscuro moderno: prefers-color-scheme y theming

Implementa dark mode robusto con tokens CSS, preferencia del sistema y override manual sin romper accesibilidad.

¿Cuánto sabes de CSS?

📘 Teoría

Tokens para tema claro y oscuro

Cambia variables, no componentes enteros.

Define un set mínimo de tokens: fondo, superficie, texto y acento. Sobre ellos construyes todo el sistema visual.

Después puedes activar tema oscuro con media query o atributo en html.

Base de tokens

:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --accent: #2563eb;
  color-scheme: light;
}

:root[data-theme='dark'] {
  --bg: #0b1220;
  --surface: #111827;
  --text: #e2e8f0;
  --accent: #60a5fa;
  color-scheme: dark;
}

Preferencia del sistema

Soporte automático para usuarios que ya usan modo oscuro.

@media (prefers-color-scheme: dark) permite adaptar estilos cuando el sistema operativo está en oscuro.

Si ofreces toggle manual, prioriza el valor elegido por usuario sobre la preferencia automática.

Media query de preferencia

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0b1220;
    --surface: #111827;
    --text: #e2e8f0;
  }
}

1 Tokens para tema claro y oscuro 2 Preferencia del sistema

🧪 Aprende probando

Ejemplo Demo: tarjeta con tema El componente usa solo tokens y no depende del tema explícito.

⌄

🏁 Retos

Reto Reto: override manual Activa una paleta oscura con [data-theme='dark'].

⌄

🧰 Recursos

Enlaces útiles

MDN - color-scheme

Test

Comprueba tus conocimientos con un test sobre CSS.

Test de CSS

Recursos del curso 78

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 43

Container Queries: componentes realmente responsivos

Lección 45

Navbar Responsive: Del menú hamburguesa al off-canvas

›