Technology1 min read

Safari introduces Adaptive Dark Mode in 27.3

By · Published by Everything Blog

In short

The WebKit engine analyzes page elements and applies a specialized color matrix targeting light backgrounds, dark text, and CSS gradients. It enforces WCAG 4.5:1 contrast ratios to ensure buttons, text, and hover menus stay clearly readable. While most images are left alone, simple black-and-white bitmap logos can be inverted based on pixel histograms. Developers are urged to adopt modern CSS color-scheme standards to provide native support rather than relying on automatic conversions.

Key points

  • The new capability addresses a substantial adoption deficit where native dark mode lags f…: The new capability addresses a substantial adoption deficit where native dark mode lags far behind user demand.
  • Websites that naturally feature dark layouts or support native dark mode will experience…: Websites that naturally feature dark layouts or support native dark mode will experience no automated alterations.
  • Developers are advised to implement native CSS color-scheme standards and switch to SVG a…: Developers are advised to implement native CSS color-scheme standards and switch to SVG assets to ensure proper rendering.

Sources checked by our analysis pipeline: 1

Introducing Adaptive Dark Mode

We’re excited to announce Adaptive Dark Mode in Safari 27.3 beta. When enabled by a user, Safari adapts light websites and presents them as dark.

In the spring of 2019, Safari 12.1 became the first browser to support dark mode on the web. A lot of people love using dark mode, but not every website has a dark version. Almost 40% of web page loads are from users in dark mode, and yet only 10% of page loads support it. If you love dark mode, you’ve probably hit a site that felt particularly bright. Adaptive Dark Mode is designed to close that gap, providing a consistent dark experience across the web.

You can try it today in Safari 27.3 beta. To enable, first make sure your system appearance is set to dark. Then browse to a website with a bright background. Safari will offer a preview of Adaptive Dark Mode. Tap ‘Try’.

For websites that signal support of dark mode with <meta name="color-scheme" content="light dark">

in HTML or color-scheme: light dark

in CSS, Adaptive Dark Mode…

Technology