Safari 27.3 beta will dark-mode your light site unless your CSS says otherwise

Here's a number for anyone who shipped a white page in 2026 and called the theme work done. WebKit's announcement says almost 40% of web page loads come from users in dark mode, and only 10% of page loads support it. So a lot of people open your docs at midnight and get a flashlight in the eyes. Safari 27.3 beta now has a fix for that, and you don't get a vote unless you've already written one line of CSS. The feature is Adaptive Dark Mode. When a user turns it on, Safari takes a light website and presents it as dark.

Who flips the switch

The user does, not you. According to the post (by Simon Fraser, Luming Yin, Lily Spiniolas, Joanne Pan, Veda Periwal and Jen Simmons, dated November 3), the system appearance has to be set to dark. Then, on a site with a bright background, Safari offers a preview of Adaptive Dark Mode with a "Try" button.

Then comes the gate. If your page signals dark-mode support with <meta name="color-scheme" content="light dark"> in HTML or color-scheme: light dark in CSS, the post says Adaptive Dark Mode "does not change a thing." If it doesn't, Safari analyzes the page and estimates whether it's mostly light or mostly dark. A page that already has a dark background with light text is left alone. A light page gets adapted.

That makes color-scheme the deciding property. For most of us it has been a set-and-forget line that makes form controls and scrollbars match the theme. In Safari 27.3 beta it also decides whether the engine recolors your whole page.

What happens to your pixels

WebKit built a color matrix that inverts the luminosity of colors while keeping their hue. Light backgrounds go dark, dark text goes light, and light CSS gradients turn dark too. Transformed text aims for the WCAG 4.5:1 contrast ratio. Your pastel landing page gets the Deftones-album-cover treatment, and in theory it stays readable.

Images are handled case by case:

• Most images are left unchanged.
• SVG images are inspected, and their colors are transformed when needed.
• For bitmaps, Safari analyzes the pixel histograms and inverts simple black-and-white logos.
• <canvas> content is not touched at all.
• Masks and mix-blend-mode can look wrong on an element whose colors were transformed, so in some cases Adaptive Dark Mode turns those effects off.

The post's cleanup list reads like a museum of 2009 front-end. Swap bitmap logos and icons for SVG. Use solid or gradient colors in CSS instead of tiled background images. Replace image sprites with modern CSS for rounded corners, shadows and button states (I hand-sliced so many of those sprite sheets, and honestly I'll miss them a little). Give content images transparent backgrounds instead of baking the page color into them, and add padding to containers so things don't crowd.

Saying yes, saying no, or claiming one corner

If you want full control, ship your own dark mode. Declare it early:

<meta name="color-scheme" content="light dark">

:root { color-scheme: light dark }

The post also lists @media (prefers-color-scheme: dark), <picture><source media="(prefers-color-scheme: dark)"> and light-dark() as part of the toolkit, and WebKit describes all of it as widely available today. It also mentions color-mix(), contrast-color() and CSS variables for organizing a design system. Put the meta tag in your HTML head, set the property on :root or body, or both. WebKit is explicit that you shouldn't inject the declaration later with JavaScript. It belongs in the initial HTML and CSS so the page renders correctly right away.

Need your own dark styling for just one part of the page? Apply color-scheme: light dark to that element and write your dark styles for it.

Want out entirely? Use <meta name="color-scheme" content="light only">, or color-scheme: light only in CSS, either on specific elements or on the whole page through :root. One catch: the only keyword is not supported in Safari 27.3 beta 1. The opt-out is documented, but this build doesn't honor it.

You can't sniff it, by design

You won't catch this at runtime either. Safari stops websites from detecting that Adaptive Dark Mode is on. JavaScript that queries CSS colors gets the original colors you wrote, and images drawn into a canvas render in their original form. WebKit's reason is fingerprinting: being able to detect the mode would give trackers one more signal. The practical effect is that your declarative CSS is the only thing that counts. There's no analytics event to watch and no runtime patch. Your color-scheme value is either in the first response or it isn't.

Support right now

Adaptive Dark Mode is available only in Safari 27.3 beta, and the only opt-out isn't there yet in beta 1. WebKit says to check back as the feature evolves through the beta process. The post doesn't say anything about other browsers doing the same thing, so I won't guess.

Verdict: a solid 8/10 for the engine work and a 2/10 for the sea of light-only pages that made it necessary. Open your <head>. If there's no color-scheme in it, this is the week to add one.