Safari 27.3 beta adds Adaptive Dark Mode that renders light websites dark

What Safari 27.3 beta introduces

Apple's WebKit team has announced Adaptive Dark Mode, a feature in the Safari 27.3 beta that automatically restyles light-themed websites so they render dark. According to the WebKit blog post, the feature only kicks in when a user opts in: with the system appearance set to dark, visiting a site with a bright background prompts Safari to offer a preview of the converted page, which the user accepts by tapping a button labeled "Try".

The post frames the feature as an answer to a persistent mismatch. Safari 12.1, released in spring 2019, was the first browser to support dark mode on the web, yet WebKit estimates that while nearly 40% of page loads now come from users browsing in dark mode, only about 10% of page loads actually support it. Adaptive Dark Mode is intended to close that gap for the rest of the web.

How the conversion works

Any page that already declares dark mode support, either through a color-scheme meta tag in the HTML head or color-scheme: light dark in CSS, is left completely alone. For everything else, Safari analyzes the page's colors to estimate whether it reads as predominantly light or dark. Pages that are already dark stay untouched; light pages get transformed.

The core mechanism is a color matrix that flips a color's brightness while keeping its hue, so light backgrounds become dark and dark text becomes light. When adjusting text, Safari targets the WCAG-recommended 4.5:1 contrast ratio, and light CSS gradients are converted along with the rest of the palette. The engine also makes contextual judgments, WebKit explains: buttons keep contrast against their backgrounds, text remains legible over images, and hover menus stay readable.

Images get more conservative treatment. Most are left exactly as authored, but icons and logos can lose contrast once the background behind them flips, so Safari inspects SVG images and recolors them where needed. For bitmaps, it examines pixel histograms and inverts simple black-and-white logos. CSS effects such as masks and mix-blend-mode can interact badly with transformed colors, so Safari disables them on some elements, and canvas content is never altered because its output is too unpredictable. Because the work happens deep inside the WebKit engine, the team says the transformations can be applied quickly and power-efficiently.

What developers can do

WebKit advises that pages built with modern practices will generally adapt well, and it offers concrete fixes for older sites: swap bitmap logos for SVG, use solid or gradient CSS colors rather than tiled background images, replace image sprites with CSS for rounded corners, shadows and button states, and export content images with transparent backgrounds instead of baking in the page background.

Sites that want to stay light can opt out by declaring color-scheme: light only, either as a meta tag or in CSS, with the CSS route allowing opt-outs for individual elements. One caveat in the announcement: the "only" keyword is not yet supported in the first Safari 27.3 beta. Developers who want full control are encouraged to build real dark mode support using prefers-color-scheme, the light-dark() function, color-mix(), contrast-color() and related CSS, and to declare color-scheme statically in the document rather than injecting it later with JavaScript.

Privacy protections

A browser-wide re-theming could become a fingerprinting vector if sites could detect it. WebKit says Safari therefore hides the transformation from JavaScript entirely: code that queries CSS colors receives the original authored values, and anything drawn to a canvas renders in its unmodified form.

Why it matters

Roughly four in ten page views now come from people browsing in dark mode, yet only a tenth of pages accommodate them, and until now closing that gap was left to individual sites. Adaptive Dark Mode moves the work into the browser engine, which means a large share of the web may soon be re-rendered without its authors' involvement. The practical takeaway for developers is that declaring color-scheme has become a control switch: it is the difference between Safari converting your page automatically and your own styles being respected. And because the transformation is invisible to JavaScript, sites have no way to know which visitors are seeing a converted version — a privacy win that also means analytics cannot reveal how a page actually looks to those users.