Apple has announced Adaptive Dark Mode in Safari 27.3 beta, a feature that automatically transforms light-themed websites into dark versions when a user enables the setting.
According to the announcement, there is a significant mismatch between dark mode adoption and website support. Almost 40% of web page loads come from users in dark mode, yet only 10% of page loads support it. Adaptive Dark Mode aims to bridge this gap by providing a consistent dark experience across the web.
The feature analyzes each page to determine whether it has a predominantly light or dark appearance. For websites that explicitly signal dark mode support through HTML or CSS (using color-scheme: light dark), Adaptive Dark Mode makes no changes. For other sites, it examines colors and applies transformations when needed.
Adaptive Dark Mode uses a color matrix to invert luminosity while preserving hue, making light backgrounds dark and dark text light. The transformation targets a 4.5:1 contrast ratio following Web Content Accessibility Guidelines. CSS gradients are also transformed, and the feature carefully adjusts buttons, text visibility over images, and hover menus to remain usable.
For images, the approach varies. Most bitmap images are left unchanged to preserve integrity, but SVG images and simple black-and-white logos are inspected and transformed when their contrast would be compromised by background inversion. Canvas content remains unchanged.
Website developers can optimize their sites for Adaptive Dark Mode by following modern web development practices, such as using SVG for logos instead of bitmap images, employing solid or gradient colors in CSS rather than tiled backgrounds, and creating content images with transparent backgrounds.
For complete control, developers can implement native dark mode support using widely available technologies including the color-scheme meta tag, media queries for prefers-color-scheme, and newer CSS functions like color-mix() and contrast-color().
Safari prevents websites from detecting when Adaptive Dark Mode is active, protecting user privacy. JavaScript queries return original authored colors rather than transformed ones, and canvas images render in their original form, preventing trackers from fingerprinting users based on dark mode preference.
Key facts
- Almost 40% of web page loads come from users in dark mode, but only 10% of sites support it
- Adaptive Dark Mode analyzes page colors to determine light or dark appearance before applying transformations
- For sites with explicit dark mode support, Adaptive Dark Mode makes no changes
- SVG images are inspected and transformed when needed, while most bitmap images remain unchanged
- Safari prevents websites from detecting when Adaptive Dark Mode is enabled, protecting user privacy