Safari 27.3 beta can force dark mode on any website. How it works, how to control it, and what developers should do

Apple's browser can now generate a dark version of websites that never designed one. In a WebKit blog post dated November 3, Apple engineers introduced Adaptive Dark Mode in the first Safari 27.3 beta. If your device is set to dark appearance and you land on a bright page, Safari offers to convert it.

Why it matters: WebKit says roughly 40% of page loads come from people using dark mode, but only about 10% of page loads come from sites that support it. Safari is now building the feature in, and because it ships inside the default iPhone browser, every site owner should check how their pages look once Safari has recoloured them.

What Safari actually does

According to the WebKit post:

• Sites that already support dark mode are left alone. If a page declares color-scheme: light dark, Safari doesn't touch it. Pages that are already dark, with a dark background and light text, are also skipped.
• Light pages get a colour transform. Safari applies a colour matrix that inverts luminance but keeps hue, so a pale blue background becomes a dark blue rather than an orange. Light CSS gradients are converted too.
• Text contrast targets WCAG's 4.5:1 ratio. Safari tries to tell decorative colours from meaningful ones, so buttons, text over images and hover menus stay visible.
• Most images are untouched. SVG colours are adjusted where needed to keep icons and logos readable. For bitmaps, Safari looks at pixel histograms and inverts simple black-and-white logos. <canvas> content is never changed.
• Some effects may be switched off. Masks and mix-blend-mode can be disabled on transformed elements to avoid broken results.

WebKit calls this a preview that will change during the beta.

Websites can't tell it's happening

WebKit says this is deliberate, to limit fingerprinting. Sites can't detect that Adaptive Dark Mode is on. JavaScript that reads CSS colours gets the original values, and images drawn to a canvas come back in their original form.

PPC Land points out a side effect for publishers and advertisers. Nobody can measure how many visitors see an adapted page, and light banner images may stay bright on an otherwise dark page.

How to turn it on, or off

WebKit's instructions are simple. Set your system appearance to dark, open a site with a bright background, and tap Try when Safari offers a preview.

The WebKit post doesn't explain how to turn the feature off. German Apple site Apfelpatient, testing beta 1 on an iPhone, found a control at Settings > Apps > Safari > Website Settings > Adaptive Dark Mode. There you can set "Other Websites" to On or Off, or handle sites one at a time. This is beta software, so the menu could move before release.

Apfelpatient also reports that the same beta adds vertical tabs to Safari on iPhone, iPad and Mac, and that iOS 27.3 is due in December. Apple hasn't announced a release date.

Early reports: real sites don't all survive

A GitHub issue opened on November 3 in the repository for GOV.UK Frontend, the UK government's design system, lists what broke on its components under Adaptive Dark Mode:

• Focus states turned into white text on yellow.
• Secondary buttons were inverted until they looked like underlined links.
• Empty text fields became solid dark blocks because their borders weren't inverted.
• Warning icons weren't adapted.

The author notes that the feature is still in beta and may change. Still, it shows what to test for: focus styles, form fields and anything that leans on borders or box-shadows.

What site owners should do now

If your site already has a good dark theme, declare it early so Safari leaves you alone. WebKit recommends putting it in the HTML head and/or on :root, not injecting it later with JavaScript:

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

:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) { /* your dark styles */ }

If your design must stay light (a brand palette, a print-style layout), WebKit documents an opt-out:

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

:root { color-scheme: light only; }

The CSS version can be scoped to specific elements. There's a catch: WebKit says the only keyword isn't supported in Safari 27.3 beta 1, so the opt-out won't work until a later build. Add it now anyway.

To make the automatic conversion look better, WebKit suggests:

• Replace bitmap logos and icons with SVG.
• Use CSS colours and gradients instead of tiled background images.
• Give content images transparent backgrounds instead of baked-in white.
• Swap old image sprites for CSS.

WebKit asks site owners with problems to contact web-evangelist@apple.com. Users can report broken sites through Feedback Assistant.

Who should care

Front-end teams with light-only sites should test on the iOS 27.3 beta before the December release, starting with forms, focus states and logos. Dark-mode users get the feature for free, and the setting above lets you turn it off if a site you rely on looks wrong.