Safari Ahora Oscurece Sitios que Nunca lo Pidieron, y Tu Página No Puede Saberlo

Alguien te dice que los colores de tu sitio se ven mal. Apagados, invertidos, o la gráfica en medio de la página es un rectángulo blanco brillante en un diseño oscuro. Abres la misma página en el mismo modelo de teléfono y todo está exactamente como lo diseñaste.

No se equivocan y tú tampoco. Desde el 3 de noviembre de 2026 hay una tercera parte en esa conversación, y lo importante de saberlo no es que cambie tus colores. Es que tu página está deliberadamente impedida de descubrirlo.

Qué es el Modo Oscuro Adaptativo

Adaptive Dark Mode llegó en Safari 27.3 beta. La descripción de WebKit es de una sola oración: “Cuando lo habilita un usuario, Safari adapta sitios claros y los presenta oscuros.”

La razón que dan es una brecha entre dos números, y vale la pena citarla porque explica por qué esto siempre iba a suceder: “Casi el 40% de las cargas de página provienen de usuarios en modo oscuro, y sin embargo solo el 10% de las cargas de página lo soportan.”

Es opcional, por el usuario y no por ti. Alguien que navega con apariencia de sistema oscura llega a una página clara, Safari ofrece una vista previa, y tocan Probar. De ahí en adelante, las páginas claras se ven oscuras para ellos. No hay un banner en la página ni nada en tu analytics que indique que sucedió.

Cómo decide si debe modificar tu página

Hay dos caminos y solo uno de ellos te involucra.

Si tu página declara soporte para modo oscuro, no sucede nada. Una página que contiene <meta name="color-scheme" content="light dark"> en su HTML, o color-scheme: light dark en CSS, se deja exactamente como fue escrita. Le has dicho a Safari que manejas el oscuro tú mismo, y te cree.

Para todo lo demás, observa. Analiza la página, estima si es predominantemente clara u oscura, y deja solas las páginas de aspecto oscuro. Una página con apariencia clara se transforma.

La transformación en sí es una matriz de color que invierte la luminosidad mientras preserva el matiz, así un fondo blanco se vuelve oscuro y el texto oscuro se vuelve claro sin que todo se convierta en un negativo fotográfico. Para el texto apunta a la proporción de contraste WCAG 4.5:1.

La parte que produce bugs es lo que no transforma

Una inversión total sería fácil de entender. Esto no lo es, y las excepciones son de donde vienen los reportes.

• Los gradientes CSS claros se transforman, así que un gradiente que afinaste cuidadosamente se recomputa.
• Las imágenes SVG se inspeccionan y sus colores se transforman cuando es necesario. Las imágenes de mapa de bits se dejan principalmente solas, pero sus histogramas de píxeles se analizan y los logotipos simples en blanco y negro se invierten.
• Las máscaras y mix-blend-mode pueden desactivarse. El razonamiento de WebKit es que esos efectos producen resultados indeseables en un elemento cuyos colores han sido transformados, así que en algunos casos Adaptive Dark Mode los desactiva en lugar de transformarlos.
• <canvas> se deja completamente sin cambios, porque el contenido del canvas es, según sus palabras, “difícil de predecir”.

Lee los dos últimos juntos y tienes un defecto que nadie escribió. Una gráfica renderizada en un canvas mantiene su fondo blanco mientras cada píxel a su alrededor se oscurece. Una superposición compuesta deja de componerse. Ambas son invisibles para ti y obvias para la persona que mira la pantalla.

Tu página no puede saber

Esta es la parte que importa si estás intentando descubrir qué alguien está viendo, y es una decisión de diseño deliberada en lugar de una brecha.

La posición de Apple es que una configuración detectable es una superficie de fingerprinting, así que:

Safari previene que los sitios web detecten cuándo se ha aplicado Adaptive Dark Mode. JavaScript que consulta colores CSS obtendrá los colores originales creados, no los transformados.

Eso es absoluto, y la solución alternativa obvia está cerrada en el mismo párrafo: “Cualquier imagen dibujada en canvas se renderiza en su forma original.” Capturar una pantalla de tu propia página en un canvas devuelve la versión que escribiste, no la versión que se está mostrando.

Así que getComputedStyle te devuelve tus propios valores. Un endpoint de diagnóstico que reporta colores calculados reporta tu stylesheet. Una solicitud “pega tus estilos calculados” al reportero devuelve lo mismo. Cada instrumento que posees está del lado equivocado de la transformación, que es una forma familiar: la página no puede verse a sí misma, y el único testigo es una persona mirando una pantalla.

Deshabilitar, y la trampa a partir de hoy

Dos declaraciones que hacen cosas opuestas.

color-scheme: light dark dice que soportas modo oscuro y lo manejarás. Adaptive Dark Mode entonces te deja en paz. Este es el indicado si tienes, o pretendes construir, un verdadero tema oscuro, y el consejo de WebKit es declararlo en el head del HTML en lugar de inyectarlo después con JavaScript, para que la página se renderice correctamente lo antes posible.

color-scheme: light only, o <meta name="color-scheme" content="light only">, dice que la página solo debe mostrarse en modo claro, y rechaza la transformación por completo.

La trampa vale la pena saber antes de enviarlo como una corrección: WebKit nota que la palabra clave only “no es soportada en Safari 27.3 beta 1”. Es una beta, la característica se describe explícitamente como evolucionando durante esa beta, y la salida documentada aún no funciona en la primera compilación de ella.

Qué preguntar a quien reportó el problema

La pregunta ordinaria, “qué navegador y versión”, no te llevará allí. Alguien que tocó Probar hace varias semanas no lo ve como una configuración que cambió, más de lo que reportaría su brillo de pantalla.

Dos preguntas funcionan. ¿Se ve mal en una ventana privada? y ¿se ve mal en un dispositivo diferente? Ambas cambian la respuesta si Adaptive Dark Mode está involucrado, y ninguna requiere que el reportero sepa qué es.

Mejor aún es una imagen. La brecha entre lo que tu código describe y lo que una pantalla muestra es exactamente la brecha que una captura de pantalla cierra, y en este caso es lo único que puede, porque la página misma ha sido colocada del lado equivocado de la pregunta.

Esta es la segunda vez en un año que un lanzamiento de Safari cambió lo que significa un reporte de bug en lugar de lo que una página puede hacer, después de los cambios en los reportes en Safari 27.

Qué extraer de esto

Un navegador ahora edita tus colores en nombre del usuario, decide caso por caso qué elementos editar, desactiva algunos de tus efectos para hacerlo, y oculta toda la operación de tu código por una buena razón.

Si tienes un tema oscuro, decláralo y esto nunca se aplica a ti. Si no lo tienes, la opción realista es dejar que suceda y verificar que tus canvas y modos de mezcla sobrevivan, o declara light only y observa la beta que lo soporte. Lo que no está disponible es descubrirlo desde dentro de la página, lo que significa que el próximo reporte de “los colores se ven mal” es uno que deberías creer.

El anuncio de WebKit, con los ejemplos y la lista completa de lo que se transforma y lo que no, es Introducing Adaptive Dark Mode.