While a significant portion of web users prefer dark mode, a massive disparity exists in web development: approximately 40% of page loads are performed by users in dark mode, yet only 10% of those pages actually support a native dark theme. To bridge this gap, Safari 27.3 introduces Adaptive Dark Mode. When enabled, the browser identifies websites that do not signal support for dark mode and automatically adapts their appearance. If a site already declares support using standard HTML meta tags or CSS properties, Safari respects the developer's original design and makes no changes.
The image demonstrates the browser's ability to identify and adapt websites that lack native dark mode support by inverting luminosity.
The transformation happens deep within the WebKit browser engine, allowing for high-speed, power-efficient color processing. At its core, the system uses a color matrix to invert the luminosity of colors while preserving their original hue. This ensures that light backgrounds become dark and dark text becomes light while maintaining readability. The engine specifically targets a WCAG 4.5:1 contrast ratio to ensure text remains visible. Furthermore, the system distinguishes between decorative and semantic colors, making careful judgments to ensure that buttons maintain contrast against backgrounds and that text remains legible over images.
Adaptive Dark Mode also handles complex assets like logos and icons. While most bitmap images are left untouched to preserve their integrity, the engine inspects SVG images and transforms their colors when necessary. For bitmap images, it analyzes pixel histograms to identify and invert simple black-and-white logos. To avoid unpredictable results, the browser turns off certain effects like masks and mix-blend-mode on transformed elements and leaves <canvas> content entirely unchanged. To protect user privacy and prevent fingerprinting, Safari ensures that websites cannot detect when Adaptive Dark Mode is active; JavaScript queries for CSS colors will still return the original authored values rather than the transformed ones.
Developers have several ways to interact with this new feature. Websites can opt out of the transformation entirely by using the `color-scheme: light only` rule, which tells the browser to only display the page in light mode. Alternatively, developers can provide a superior, hand-crafted experience by implementing native dark mode using modern CSS functions like `light-dark()`, `color-mix()`, and `contrast-color()`. For the best results with Adaptive Dark Mode, the WebKit team recommends using SVG for logos, solid or gradient colors in CSS instead of tiled background images, and creating content images with transparent backgrounds rather than baking in a specific page color.
This visual illustrates the distinction between the browser's automatic adaptation and the hand-crafted experiences developers can provide.