Media query prefers-color-scheme
Detecte la preferencia del modo oscuro o claro del sistema del usuario mediante la media query prefers-color-scheme.
Media query prefers-color-scheme es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Por qué usar el modo oscuro automático?
Muchos usuarios activan el modo oscuro en el sistema operativo por comodidad, para ahorrar batería (en pantallas OLED) o por motivos de accesibilidad. La consulta de medios prefers-color-scheme detecta esta preferencia y permite que el sitio se adapte automáticamente.
Valores de la consulta
Dos valores:
light: el usuario prefiere un esquema de colores claro (o no tiene ninguna preferencia)dark: el usuario prefiere el modo oscuro
<p>This page respects your OS dark mode setting.</p>
Modo oscuro mobile-first
Si la mayoría de sus usuarios utilizan dispositivos móviles OLED, considere establecer el modo oscuro como estilo base:
<p>Dark by default; switches to light in light mode.</p>
Enfoque con variables CSS
La implementación más limpia consiste en definir un conjunto de tokens para cada esquema:
<div class="card">Themed card using CSS variables</div>
Imágenes en modo oscuro
Reduzca el brillo de las imágenes en modo oscuro para evitar que deslumbren:
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120'><rect width='200' height='120' fill='%23ff6347'/></svg>" alt="demo" />
Detección con JavaScript
Compruebe la preferencia de modo oscuro en JavaScript para habilitar un comportamiento dinámico:
<p id="theme-status">Checking...</p>
<script>
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.getElementById('theme-status').textContent = isDark ? 'System is in DARK mode' : 'System is in LIGHT mode';
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
document.getElementById('theme-status').textContent = e.matches ? 'System is in DARK mode' : 'System is in LIGHT mode';
});
</script>
Pruebas en DevTools
En Chrome DevTools → pestaña Rendering → Emulate CSS prefers-color-scheme. Alterne entre claro y oscuro sin cambiar la configuración del sistema operativo. En Firefox: DevTools → pestaña Inspector → menú del icono del ojo.
Principios de color del modo oscuro
Un modo oscuro eficaz:
- Utiliza gris oscuro (no negro puro) para los fondos — reduce la fatiga visual
- Reduce las sombras de elevación — utiliza tonos de fondo más claros para las superficies superiores
- Ajusta los colores de los bordes para que sean más claros y visibles
- Comprueba las relaciones de contraste del texto — pueden ser necesarias relaciones diferentes
Antipatrón de invertir colores
Nunca invierta simplemente todos los colores con filter: invert(1) para crear un modo oscuro. Las imágenes y los iconos adquirirán colores extraños. Utilice tokens de modo oscuro adecuados, con colores apropiados para cada elemento.
Rendimiento: evitar el parpadeo
Si utiliza un cambio de tema controlado por JavaScript, evite un parpadeo del tema sin estilos (FOUT) aplicando sincrónicamente la clase del tema a <html> en una etiqueta <script> dentro de <head>, antes de que se renderice la página.
Color del tema en meta
Actualice el color de la interfaz del navegador (la barra de direcciones móvil y el selector de aplicaciones) para que coincida con el tema oscuro:
<pre class="code-sample"><meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1a1a2e"></pre>
Comprobación rápida
¿Qué valor de media query debe utilizar para aplicar estilos de modo oscuro cuando el sistema operativo está configurado en modo oscuro?
Resumen
prefers-color-scheme: dark detecta la preferencia de modo oscuro del sistema operativo. Implemente el modo oscuro automático mediante variables CSS que intercambien los valores de los tokens dentro de la media query. Reduzca el brillo de las imágenes en modo oscuro. Realice pruebas en DevTools. Actualice la etiqueta meta theme-color del navegador para ofrecer una experiencia móvil completa.
Aprende CSS con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 40
- Lecciones
- 159
Preguntas frecuentes
¿La lección «Media query prefers-color-scheme» es gratis?
Sí — el texto completo de «Media query prefers-color-scheme» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Media query prefers-color-scheme»?
Detecte la preferencia del modo oscuro o claro del sistema del usuario mediante la media query prefers-color-scheme. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Media query prefers-color-scheme»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Media query prefers-color-scheme
- Variables CSS para temas
- Propiedad color-scheme
- Alternancia automática y manual del modo oscuro