Si tu sitio web solo tiene diseño claro, pronto algunos usuarios de Safari lo podrían ver en oscuro sin que tú hagas nada. Apple presentó Adaptive Dark Mode, un modo oscuro adaptativo que transforma las páginas claras cuando el usuario lo pide.
Por ahora está en la beta de Safari 27.3, pero conviene revisarlo ya: la forma en que declares los colores de tu sitio decide si Safari lo toca o no.
¿Qué pasó?
El 3 de noviembre de 2026 el equipo de WebKit, el motor de Safari, anunció la función en su blog. Ese mismo día Apple liberó a desarrolladores las betas de iOS 27.3 y macOS 27.3, que también traen pestañas verticales en Safari.
Funciona así: el usuario debe tener su sistema en apariencia oscura. Al entrar a una página con fondo claro, Safari le ofrece una vista previa con el botón Try. Según 9to5Mac y Macworld, después puede elegir que se active solo o decidir sitio por sitio.
WebKit explica que la transformación invierte la luminosidad, pero conserva el tono de los colores. También ajusta degradados de CSS, gráficos SVG y logotipos sencillos en blanco y negro. El contenido de un elemento canvas se queda igual. Al cambiar el color del texto, busca un contraste mínimo de 4.5 a 1, la medida que recomiendan las pautas de accesibilidad WCAG.
La razón que da WebKit: casi 40% de las cargas de páginas vienen de personas en modo oscuro, pero solo 10% de esas páginas lo soportan.
¿Por qué te importa?
Si tu sitio ya declara que soporta modo oscuro, Safari no le cambia nada. Eso se hace con la propiedad de CSS color-scheme, que le dice al navegador qué esquemas de color maneja tu página, o con una etiqueta meta equivalente en el HTML.
Si no declaras nada, Safari podría repintar tu diseño. WebKit menciona una forma de pedir que no lo transforme, con el valor light only, pero aclara que esa palabra todavía no funciona en la primera beta. Así que hoy la única protección segura es tener tu propio modo oscuro.
Hay un detalle de privacidad: tu sitio no puede saber si Safari aplicó la transformación. Si tu JavaScript lee los colores, recibe los originales. Apple lo hace para que esta función no sirva para identificar a los usuarios. Por eso no podrás detectarlo y corregirlo en código; tienes que probarlo a mano.
Según 9to5Mac y Macworld, la versión final de Safari 27.3 llegaría a todos en diciembre.
Cómo declarar que tu sitio ya tiene modo oscuro
Si ya tienes estilos oscuros, basta con avisarle al navegador en tu hoja de estilos principal:
:root {
color-scheme: light dark;
}Haz esto solo si de verdad tienes estilos para los dos modos; si no, Safari dejará tu diseño claro tal cual aunque el usuario quiera verlo en oscuro.
¿Qué puedes hacer?
- Prueba tus sitios en Safari 27.3 beta con el sistema en modo oscuro y revisa si algo se ve mal.
- Si ya tienes estilos oscuros, declara
color-scheme: light darkpara que Safari no los toque. - Cambia logotipos en imagen de mapa de bits por versiones en SVG, como recomienda WebKit.
- Usa colores de CSS en lugar de imágenes de fondo repetidas para que la transformación se vea limpia.
- Si quieres control total, diseña tu propio modo oscuro con la consulta de medios
prefers-color-scheme.
Sigue leyendo
- Chrome 157 trae esquinas con forma y recortes de texto propios en CSS
- Firefox 159 ya mueve animaciones con el scroll usando solo CSS
Fuentes
- WebKit: Introducing Adaptive Dark Mode
- 9to5Mac: iOS 27.3 and macOS 27.3 add Vertical Tabs, Adaptive Dark Mode, and more to Safari
- Macworld: Apple finally brings vertical tabs to Safari in surprise 27.3 feature drop
Imagen de portada: foto de Negative Space en Pexels.