Safari 27.3 Adaptive Dark Mode recolors your light-only site

Safari 27.3 Adaptive Dark Mode will repaint your website if you never built a dark version of it. Apple shipped the feature in the first iOS 27.3 and macOS 27.3 developer betas on November 3, and the WebKit team explained the mechanics the same day. If your site, your Shopify theme or your checkout only ships light colors, Safari now has an opinion about what it should look like at night.

What actually happened

Here is how Adaptive Dark Mode works, per the WebKit post:

• Trigger. The user's system appearance is set to dark. When they land on a bright site, Safari offers a preview and a "Try" button. 9to5Mac reports the user can then apply it automatically or site by site.
• Who gets left alone. Pages that declare color-scheme: light dark in CSS, or the matching <meta name="color-scheme"> tag, are untouched. So are pages that are already mostly dark.
• The transform. A color matrix inverts luminosity and keeps hue, tuned toward the WCAG 4.5:1 text contrast ratio. Light CSS gradients become dark. SVGs are transformed. Simple black-and-white bitmap logos get inverted. Most photos, and anything in <canvas>, stay as they are. Masks and mix-blend-mode may be switched off.
• Opt out. color-scheme: light only, in the meta tag or in CSS on :root or a single element. One catch: the only keyword does not work yet in 27.3 beta 1.
• You cannot detect it. JavaScript that reads CSS colors gets the original values. Canvas renders in original colors. Apple did this on purpose.

The post cites Chrome Status numbers to justify the move: almost 40 percent of page loads come from users in dark mode, and only about 10 percent of page loads support it. The beta also adds vertical tabs and Siri AI tab actions. Apple gave no public release date. 9to5Mac guesses December.

Why it matters for your business

Your brand colors are about to be inverted by a browser you do not control. A tiled background image stays light while the text around it goes dark. A logo PNG with a white box behind it becomes a white box on a black page. A hero gradient you spent a week on gets a new palette. None of this shows up in your analytics, because the site cannot tell it happened.

Three things to do before the public release:

1. Declare color-scheme: light dark in your CSS and ship real dark styles. Custom properties make this a one-file change on most sites we build.
2. If dark is off the table, add color-scheme: light only now so it takes effect the moment Apple ships the keyword.
3. Replace tiled background bitmaps with CSS colors, use SVG or transparent-background logos, and set color-scheme in HTML or CSS, not in JavaScript, so it is there on first paint.

Then install the beta and look at your own checkout at 10 PM.

Sources: WebKit blog: Introducing Adaptive Dark Mode, 9to5Mac.