hn.today

Safari introduces Adaptive Dark Mode in 27.3

webkit.org441 points228 comments
Screenshot of Safari introduces Adaptive Dark Mode in 27.3

Safari 27.3 beta adds Adaptive Dark Mode, which can turn websites without their own dark theme into dark presentations when a user has enabled system dark appearance. The feature addresses a gap between demand and availability: nearly 40% of page loads come from people using dark mode, while only about 10% of pages support it. On an eligible bright site, Safari offers a preview users can try. Pages that declare dark-mode support are left alone; otherwise, Safari assesses whether a page is generally light or dark and transforms light pages. It darkens backgrounds, lightens text while aiming for WCAG’s 4.5:1 contrast ratio, and adjusts gradients and some icons or logos. Most photographs remain unchanged, while SVGs and simple black-and-white bitmap logos may be adapted. Canvases are also left untouched, and some visual effects may be disabled to avoid poor results.

Websites are more likely to work well when they use modern CSS colors, SVG logos, transparent images, and adequate spacing. Developers can declare support for both appearances with `color-scheme` and provide custom styles using `prefers-color-scheme` and newer CSS functions; they can also mark pages or regions as light-only to prevent transformation. Safari recommends declaring color-scheme in the document or CSS early, rather than adding it later with JavaScript. The browser applies transformations inside WebKit and prevents sites from detecting them: scripts see authored colors, and images drawn to canvas retain their original appearance. This limits added fingerprinting information while allowing the feature to run efficiently.

Read on webkit.org228 comments on Hacker News

Summary generated by AI from the linked article. hn.today is not affiliated with Hacker News or Y Combinator.

More in Web

The daily digest

Today's best Hacker News stories, summarized and screenshotted, one email a day.