Safari 27.3 beta Adaptive Dark Mode: how it recolours light sites and how to opt in or out

Apple's WebKit team has announced Adaptive Dark Mode, a Safari 27.3 beta feature that turns light-themed websites dark on the fly for people who use dark mode. If you build websites, the practical question is whether your site will be recoloured without your say-so, and the answer is yes unless you declare a colour scheme. Here is what Safari does, the one-line fix for sites that are already dark-ready, and how to opt out.

Key points

• Adaptive Dark Mode is in the Safari 27.3 beta, announced on the WebKit blog on 3 November 2026. The iOS 27.3, iPadOS 27.3 and macOS 27.3 betas reached developers the same day, and press coverage expects a public release in December.
• It applies when the system is in dark mode and a page has a bright background; Safari shows a preview and the user taps "Try".
• WebKit says about 40% of page loads come from users in dark mode, but only about 10% of page loads are from pages that support it.
• Pages that declare color-scheme: light dark (CSS or meta tag) are left alone; WebKit's opt-out for light-only sites uses light only, but WebKit says the only keyword is not supported in beta 1.
• Websites cannot detect that the transformation is on, and JavaScript that reads CSS colours still sees the authored values.

What to do

If you ship websites:

1. Decide what you want. If your site already has a dark theme driven by prefers-color-scheme, tell the browser by adding color-scheme: light dark to :root (or <meta name="color-scheme" content="light dark"> in the <head>). WebKit says such sites are not changed. WebKit advises declaring this in the HTML head or on :root/body in CSS, not through late JavaScript.
2. If you want to stay light-only, WebKit's documented opt-out is <meta name="color-scheme" content="light only"> or color-scheme: light only, which can target the whole page or specific elements. Caution: WebKit states that the only keyword is not supported in Safari 27.3 beta 1. Its post, as we read it, does not say what opt-out works in that first beta, so test your site on the beta rather than assuming.
3. Test the transformation. Install the beta, put the system in dark mode, open your site and tap "Try". WebKit says masks and mix-blend-mode may be turned off on transformed elements, simple black-and-white logos may be inverted, and <canvas> content is left unchanged.
4. Report problems. WebKit asks developers to write to web-evangelist@apple.com; users can report problem sites through Feedback Assistant.

If you are a user: set the system appearance to dark, visit a bright site, and use the "Try" prompt. MacRumors reports you can then turn the feature on for all sites or site by site, but it does not say where those controls live in the beta.

What happened

On 3 November 2026 WebKit published "Introducing Adaptive Dark Mode", describing a Safari 27.3 beta feature that shows light websites as dark. Safari first supported dark mode on the web in spring 2019 with Safari 12.1, WebKit notes, so the new feature targets the long tail of sites that never added a dark theme.

The mechanism, per the WebKit post: Safari quickly estimates whether a page is mostly light or mostly dark. Light pages get a colour transformation that inverts luminance while preserving hue, aims for a WCAG 4.5:1 text contrast ratio, and converts light CSS gradients to dark ones. SVG colours are transformed when needed. Bitmap images are generally left alone, although simple black-and-white logos may be inverted. MacRumors describes the visible result as a darker background, adjusted text contrast, inverted logos and graphics, recoloured vector art and rebalanced shadows, with each site getting only the tweaks it needs. It also says the feature will not activate on sites that already have a native dark design.

The same beta adds Vertical Tabs and new Siri actions for tabs, according to 9to5Mac and MacRumors, but those are separate from this feature.

Background

Web dark mode has two halves. The system tells the page the user's preference through the prefers-color-scheme media query, and the page decides whether to honour it. The color-scheme property is the other half: it tells the browser which schemes the page supports, so the browser can match built-in UI such as the canvas colour, scrollbars and default form controls. MDN lists color-scheme as Baseline "Widely available" across browsers since January 2022, and says the only keyword forbids the browser from overriding the scheme for an element. MDN adds that only light on :root can disable Chrome's Auto Dark Theme, so this opt-out idea is not new: Chrome has had a comparable automatic dark feature, and the same declaration is how sites decline it.

Extensions such as Dark Reader have long done a similar job in Safari for people who wanted it. What changes with 27.3 is that the browser itself offers it, so more users will see your site transformed without installing anything.

The numbers

WebKit's own figures explain the motivation.

From users in dark mode40

From pages that support dark mode10

Share of page loads: users in dark mode vs pages that support it (%)

	%
From users in dark mode	40
From pages that support dark mode	10

Source: WebKit blog, "Introducing Adaptive Dark Mode"

These are WebKit's approximate statistics ("roughly 40%" and "about 10%"); the post as we read it does not say how they were measured or over what population, so treat them as indicative.

What it means

For developers of light-only sites, the default has changed from "the browser leaves my colours alone" to "Safari may offer to recolour them". Because the user opts in with "Try", this is not a forced change, but screenshots, support tickets and brand-colour complaints are likely. Declaring your colour scheme explicitly is the way to stay in control.

For developers with dark themes, adding color-scheme: light dark is a one-line change that also makes built-in controls and scrollbars match your theme, which is useful regardless of this feature.

For accessibility, WebKit says the transformation aims for a 4.5:1 text contrast ratio, the WCAG minimum for normal text. It is a goal of the algorithm, not a guarantee for every page; sites with complex layering, masks or blend modes are where results may differ.

For privacy and analytics, WebKit says pages cannot detect the transformation: JavaScript that reads CSS colours gets the original authored values and canvas images render in their original form. That means you cannot measure how many visitors use it from inside the page.

What we don't know yet

• Whether light only works in practice. WebKit says only is unsupported in beta 1 and, as we read the post, gives no interim opt-out. A later beta may change this.
• Where the user settings are to turn the feature on for all sites or per site; MacRumors does not say.
• Which platforms get it. MacRumors does not list limits; the changes appear in the iOS, iPadOS and macOS 27.3 betas.
• The release date. Coverage says December after several beta rounds; Apple has not given a date in the sources we read.
• How the 40% and 10% figures were measured.

What to watch next

Watch the Safari 27.3 release notes and later betas for support for the only keyword, a settings location for the feature, and any change in how it treats images, canvas and blend modes. Before the December release, add an explicit color-scheme declaration to every site you maintain, and test the biggest pages in dark mode on a Mac or iPhone running the beta.

Sources

• Introducing Adaptive Dark Mode, WebKit blog (primary source)
• iOS 27.3 Adds Vertical Tabs and Adaptive Dark Mode to Safari, MacRumors
• iOS 27.3 and macOS 27.3 add Vertical Tabs, Adaptive Dark Mode, and more to Safari, 9to5Mac
• color-scheme, MDN Web Docs