Safari introduces Adaptive Dark Mode in 27.3

Light websites now automatically switch to dark mode, improving readability for users who prefer this setting without requiring site changes.

Safari 27.3 beta introduces Adaptive Dark Mode, a feature that automatically converts light websites into a dark theme for users who prefer this setting. This new functionality aims to provide a consistent dark mode experience across the web, addressing the disparity where nearly 40% of web page loads occur in dark mode, yet only 10% of sites natively support it. Adaptive Dark Mode analyzes website colors and applies transformations to invert luminosity while preserving hue, ensuring text remains visible and elements maintain contrast. It handles inversions for backgrounds, text, and some SVG icons, while leaving most images and canvas content unchanged to maintain integrity. Websites that already declare dark mode support via HTML meta tags or CSS will not be affected by this new feature. Users can enable it in Safari 27.3 beta by setting their system appearance to dark and then activating the preview when prompted.

The introduction of Adaptive Dark Mode by Safari's WebKit engine signifies a significant step towards universal dark mode adoption. By automatically transforming light websites, the browser aims to bridge the gap between user preference and website implementation, potentially increasing engagement for sites that previously lacked dark mode support. This feature leverages advanced color transformation algorithms, including a custom color matrix, to intelligently invert luminosity and maintain hue and contrast, ensuring usability and visual appeal across diverse web content. The browser's deep integration within the engine allows for efficient and private execution of these transformations, a key consideration given Apple's privacy focus.

This development challenges web developers to adopt best practices for dark mode support, even if their sites are not explicitly targeted by Adaptive Dark Mode. While the feature works by default for unsupported sites, explicit implementation using `<meta name="color-scheme">` or CSS `color-scheme` property is recommended for optimal results and to ensure compatibility with future browser updates. The fact that Safari explicitly prevents websites from detecting Adaptive Dark Mode usage underscores a commitment to user privacy, preventing potential fingerprinting vectors. Developers should consider how their sites will render in this auto-transformed state and may choose to implement custom dark modes for a more tailored experience.