Safari 27.3 beta can present light websites as dark for users who switch the setting on, through a feature the WebKit team announced on 3 November 2026 as Adaptive Dark Mode.

“When enabled by a user, Safari adapts light websites and presents them as dark,” says the post, credited to Simon Fraser, Luming Yin, Lily Spiniolas, Joanne Pan, Veda Periwal and Jen Simmons.

Turning it on starts with the system appearance set to dark. The user then browses to a website with a bright background, at which point Safari offers a preview of Adaptive Dark Mode. Tapping ‘Try’ applies it.

The post puts the gap the feature is aimed at in two figures: “Almost 40% of web page loads are from users in dark mode, and yet only 10% of page loads support it.” Safari 12.1 became the first browser to support dark mode on the web in the spring of 2019, the same post says.

Which pages Safari leaves alone

Pages that already declare dark support are untouched. Where a page carries in HTML, or color-scheme: light dark in CSS, “Adaptive Dark Mode does not change a thing,” the post says.

For the rest of the web, the feature quickly analyses the page, looking at colours and estimating whether it is predominantly light or dark. A page that generally has a dark background with light text is left as it is. A page with a light appearance is adapted to be dark.

How the colours are transformed

At the core of the feature is a colour matrix the team developed to invert the luminosity of colours while preserving hue. It is used to make light backgrounds dark and dark text light. Adaptive Dark Mode determines when to invert colours so elements remain visible, and when to leave colours unchanged, since colours are sometimes decorative and sometimes carry semantic meaning.

When transforming text colour, the feature aims for sufficient contrast as defined by the WCAG 4.5:1 contrast ratio. Light CSS gradients are also transformed to dark. The post says the judgments are made so that transformed content stays usable: buttons have contrast against backgrounds, text is visible over images, and hover menus look clear.

Most images are left unchanged, preserving their integrity. Many icons and logos can lose contrast when the background colour behind them is inverted, so Adaptive Dark Mode inspects SVG images and transforms colours when needed. For bitmap images, it analyses the pixel histograms and inverts simple black-and-white logos.

Masks and mix-blend-mode can create undesirable results on an element whose colours have been transformed, so in some cases the feature turns those effects off. content is left unchanged, since canvases contain a wide range of content that is hard to predict.

The work happens deep within the WebKit browser engine, which the team says is what lets it apply the transformations with great speed and power efficiency while protecting user privacy.

What site owners can change

A site that does not want to be transformed can say so with color-scheme. The HTML tag tells browsers that the page supports light mode and should only be displayed in light mode. The color-scheme: light only rule does the same in CSS, and can target specific elements or the whole page through :root. The post adds that the ‘only’ keyword is not supported in Safari 27.3 beta 1, and says to check back as Adaptive Dark Mode evolves through the beta process.

For sites that are transformed, the post says a web page will generally work well with Adaptive Dark Mode if it follows good modern web development practices, and lists smaller updates for sites still using older techniques:

  1. Swap bitmap images for SVG in logos and icons.
  2. Use solid or gradient colours in CSS instead of tiled background images.
  3. Replace image sprites with modern CSS for rounded corners, shadows and button states.
  4. Create content images with transparent backgrounds instead of baking the page background colour into the image.
  5. Add padding to containers to prevent crowding.

A site that wants a specific dark mode experience for one portion of a page can apply color-scheme: light dark to the relevant element and add its own dark styles. For complete control, the post lists the technology it says is already widely available for building full dark mode support: the color-scheme meta tag, :root { color-scheme: light dark }, @media (prefers-color-scheme: dark), , light-dark(), and newer CSS functions including color-mix() and contrast-color(). Dark mode support should be declared with the meta tag in the HTML head or by setting the color-scheme property on :root or body in CSS, rather than injected later via JavaScript, the team says, so the page renders correctly as fast as possible.

Websites cannot tell when the feature is running. Safari prevents sites from detecting that Adaptive Dark Mode has been applied, on the grounds that such detection would increase the amount of fingerprintable information and weaken privacy protections against trackers. JavaScript that queries CSS colours gets the original authored colours rather than the transformed ones, and any images drawn into canvas render in their original form.

The team has asked anyone managing a website or web app who wants to discuss how Adaptive Dark Mode is adapting their project to write to web-evangelist@apple.com, and users who try the feature and find a site that does not work well to file a report with Feedback Assistant.