Apple presentó el 3 de noviembre de 2026, en una entrada del blog de WebKit, el Adaptive Dark Mode de Safari 27.3 beta. La función repinta automáticamente en oscuro las páginas que no ofrecen un tema adaptado, sin que el sitio lo sepa. Se suma a un giro más amplio de los navegadores hacia una gestión de la apariencia controlada por el cliente en lugar de delegarla por completo a los sitios.
Un oscurecimiento que se activa sin el permiso del sitio
Cuando el dispositivo está en modo oscuro y se carga una página de fondo claro, Safari ofrece al usuario un botón «Probar» para activar la transformación. Las páginas que ya declaran compatibilidad con el modo oscuro quedan intactas, igual que las páginas mayoritariamente oscuras con texto claro. El enfoque difiere de los forzados históricos en Android, donde el navegador reescribía las hojas de estilo sin distinguir con precisión entre páginas ya adaptadas y las demás.
La mecánica de la transformación de color
Técnicamente, Safari invierte la luminosidad conservando el tono original, lo que oscurece los fondos claros y aclara el texto oscuro. El contraste del texto apunta al ratio WCAG de 4.5:1. Los degradados CSS claros se convierten con la misma lógica. La mayoría de las imágenes no se tocan: los colores de los SVG se ajustan para mantener legibles iconos y logotipos, y Safari analiza el histograma de píxeles de las imágenes bitmap para invertir logotipos simples en blanco y negro. Los elementos que usan máscaras o mix-blend-mode pueden ver esos efectos desactivados, y el contenido de un <canvas> nunca se modifica.
color-scheme, la declaración que lo cambia todo
Safari no toca las páginas que declaran correctamente su compatibilidad con ambos temas. Esto se hace mediante una etiqueta meta o una propiedad CSS:
<meta name="color-scheme" content="light dark">
<style>
:root {
color-scheme: light dark;
}
</style>A partir de ahí, el sitio puede afinar su renderizado con la media query prefers-color-scheme, la función light-dark(), color-mix() o contrast-color(). El trabajo ya en marcha sobre los tokens de tema claro y oscuro, documentado en esta guía de design tokens en CSS para un tema claro/oscuro mantenible, cubre ya buena parte de estos mecanismos.
Qué implica para la práctica de front-end
El punto más claro para los equipos de front-end: un sitio que no declara nada pierde el control de su renderizado en cuanto el usuario activa la función. Por el contrario, un sitio que moderniza sus iconos bitmap a SVG, sustituye los sprites por CSS y añade fondos transparentes en las imágenes de contenido obtiene una transformación más limpia. Estas recomendaciones coinciden con las ya formuladas para las animaciones CSS controladas por scroll, donde un marcado sobrio también facilita el renderizado en contextos variados.
| Declaración | Comportamiento de Safari 27.3 | Acción recomendada |
|---|---|---|
| Sin declaración color-scheme | Página elegible para la transformación automática | Añadir una etiqueta meta o una regla CSS color-scheme |
| color-scheme: light dark | Página sin cambios, Safari asume que el tema ya está gestionado | Verificar que el tema oscuro real esté completo |
| color-scheme: light only | Transformación desactivada (palabra clave no reconocida en beta 1) | Probar en una Safari 27.3 beta actualizada antes de confiar en ello |
| Página oscura con texto claro | Excluida automáticamente de la transformación | No requiere ninguna acción |
Los scripts que leen colores CSS o dibujan en un canvas siguen recibiendo los valores originales: la transformación permanece invisible para el código del sitio.
light only de la propiedad color-scheme, pensada para excluir una página o un elemento de la transformación, no estaba soportada en Safari 27.3 beta 1. Los equipos que quieran depender de ella deben probarla en una beta actualizada antes de darla por segura.Lo que hay que recordar
Safari 27.3 beta generaliza un oscurecimiento automático hasta ahora reservado a extensiones de terceros, con una mecánica de transformación de color más fina que un simple filtro de inversión. Los sitios que declaran explícitamente su compatibilidad con el modo oscuro mantienen el control; el resto será repintado según las reglas de Safari, lo hayan previsto o no.
Esta decisión de Apple es coherente con su postura histórica sobre privacidad: a diferencia de los enfoques que dejaban que scripts de terceros detectaran y explotaran el modo forzado, aquí ninguna API permite al sitio saber que la transformación está activa. Queda una pregunta de fondo para agencias y autónomos: ¿cuántos sitios en producción siguen sin una regla color-scheme explícita, cuando el cambio cuesta solo dos líneas de CSS? — Simon Janvier
Para profundizar: la entrada oficial del blog de WebKit sobre Adaptive Dark Mode.
