Apple has built a feature into the first beta of Safari 27.3 that displays light websites in dark. Adaptive Dark Mode only kicks in once someone has set the system appearance to dark and has turned on the recoloring themselves. In the WebKit blog, the development team also explains how you can exclude your site from it.
Apple quantifies the reason as follows: Almost 40 percent of page views come from people in dark mode, yet only 10 percent of the pages viewed support it.
How does Safari recolor a light page?
Safari first checks a page's colors. Predominantly dark pages remain unchanged, as does any page that specifies its own dark design via color-scheme. The browser converts light pages: the lightness is inverted, the hue stays. Text should reach a contrast ratio of 4.5 to 1, the value from the WCAG accessibility guidelines. Light CSS gradients become dark.
What does Safari do with your page?
Adaptive Dark Mode in the Safari 27.3 beta, only with dark system appearance and the feature turned on
What does your page look like?
- Own dark design with color-scheme: light darkSafari changes nothing
- Design is already predominantly darkSafari changes nothing
- Light, with no color-scheme specifiedSafari recolors the page dark
- Light, with color-scheme: light onlyPage stays light, once Safari understands only
The first beta does not yet understand the keyword only
Source: WebKit Blog
Safari mostly leaves images as they are. The browser adapts SVG graphics where needed, and it inverts simple black-and-white logos in raster format. The contents of a canvas element remain untouched. Safari partially disables masks and mix-blend-mode on recolored elements because the effects can produce unattractive results there.
Your website cannot detect the recoloring. Scripts that query CSS colors get back the originally set values.
From when and for whom does the recoloring apply?
So far, Adaptive Dark Mode is only in the Safari 27.3 beta. According to MacRumors, iOS 27.3, iPadOS 27.3 and macOS Golden Gate 27.3 are due to be released in December. Apple does not say in the WebKit blog on which devices the recoloring will come.
Users have to turn the feature on themselves. If the system appearance is set to dark, Safari offers a preview on a light page, in the beta via the "Try" button. According to MacRumors, after the first try the recoloring can be enabled for all websites or individually per website. Apple has not yet given a German name for it.
How do you exclude your site?
If your site already supports a dark design, you specify this in the head of the page with <meta name="color-scheme" content="light dark"> or in CSS with color-scheme: light dark. Safari leaves such pages alone. If your site should always stay light, you write light only instead. In CSS, the declaration also works for individual areas, such as a grid of product photos.
The first beta has a catch: Safari 27.3 Beta 1 does not yet understand the keyword only. Apple has not yet said when the declaration light only will take effect. Google has tested a similar automatic recoloring for Chrome on Android and writes the same declaration as only light. According to the W3C's CSS specification, the order of the two words is arbitrary.
What this means for you
If your site has no dark design of its own, Safari users with the feature turned on will soon see a different version than the one you designed. It is best to check in the beta or right after the update how logos, product photos on a white background, and charts on a dark background look. How to inspect a page in Safari is shown in the lesson on the Safari DevTools.
Your own dark design with prefers-color-scheme or the CSS function light-dark() gives you full control over the colors. For images, Apple suggests the picture element with a separate dark image source. If a brand design has to stay light, you set color-scheme: light only and check in the next betas whether Safari respects the declaration.
Regardless of the approach, Apple recommends creating logos and icons as SVG rather than as pixel images. It's best to create color areas and gradients with CSS, not as tiled background images. Images with a transparent background also adapt better.
The WebKit team introduced Adaptive Dark Mode on November 3, 2026.
Sources
