Safari 27.3 bêta : un mode sombre adaptatif qui repeint les sites sans les casser

Apple a présenté le 3 novembre 2026, dans un billet du blog WebKit, l’Adaptive Dark Mode de Safari 27.3 bêta. La fonction repeint automatiquement en sombre les pages qui n’offrent aucun thème adapté, sans que le site en soit informé. Elle s’inscrit dans une bascule plus large des navigateurs vers une gestion de l’apparence pilotée côté client plutôt que déléguée aux sites eux-mêmes.

#Un assombrissement qui s’active sans l’accord du site

Lorsque l’appareil est réglé en mode sombre et qu’une page au fond clair s’affiche, Safari propose à l’utilisateur d’activer la transformation via un bouton « Essayer ». Les pages qui déclarent déjà une prise en charge du mode sombre sont ignorées, de même que les pages majoritairement sombres avec un texte clair. L’approche diffère des forçages historiques observés sur Android, où le navigateur réécrivait les feuilles de style sans distinction fine entre les pages déjà adaptées et les autres.

#La mécanique de la transformation de couleurs

Techniquement, Safari inverse la luminosité tout en conservant la teinte d’origine, ce qui assombrit les fonds clairs et éclaircit le texte sombre. Le contraste du texte vise le ratio WCAG de 4.5:1. Les dégradés CSS clairs sont convertis selon la même logique. Côté images, la plupart restent inchangées : les couleurs des SVG sont ajustées pour garder icônes et logos lisibles, et Safari analyse l’histogramme des images bitmap pour inverser les logos simples en noir et blanc. Les éléments utilisant des masques ou mix-blend-mode peuvent voir ces effets désactivés, et le contenu d’un <canvas> n’est jamais modifié.

#color-scheme, la déclaration qui change tout

Safari ne touche pas aux pages qui déclarent correctement leur prise en charge des deux thèmes. Cela passe par une balise meta ou une propriété CSS :

<meta name="color-scheme" content="light dark">

<style>
  :root {
    color-scheme: light dark;
  }
</style>

Le site peut ensuite affiner son rendu avec les media queries prefers-color-scheme, la fonction light-dark(), color-mix() ou contrast-color(). Le travail déjà engagé sur les jetons de thème clair et sombre, documenté dans ce guide des design tokens pour le thème clair et sombre, couvre largement ces mécanismes.

#Ce que cela implique pour la pratique front-end

Le point le plus net pour les équipes front-end : un site qui ne déclare rien perd la main sur son rendu dès que l’utilisateur active la fonction. À l’inverse, un site qui modernise ses icônes bitmap en SVG, remplace les sprites par du CSS et ajoute des fonds transparents sur les images de contenu profite d’une transformation plus propre. Ces recommandations recoupent celles déjà formulées pour les animations pilotées par le défilement en CSS, où la sobriété du balisage facilite aussi le rendu dans des contextes variés.

Les scripts qui lisent les couleurs CSS ou qui dessinent sur un canvas continuent de recevoir les valeurs d’origine : la transformation reste invisible pour le code du site.

#Ce qu’il faut retenir

Safari 27.3 bêta généralise un assombrissement automatique réservé jusqu’ici à des extensions tierces, avec une mécanique de transformation de couleurs plus fine qu’un simple filtre d’inversion. Les sites qui déclarent explicitement leur prise en charge du mode sombre gardent le contrôle ; les autres seront repeints selon les règles de Safari, qu’ils l’aient anticipé ou non.

Pour aller plus loin : le billet officiel du blog WebKit sur l’Adaptive Dark Mode.