Safari 27.3 beta introduces Adaptive Dark Mode: when a user turns it on, Safari takes light websites and renders them dark automatically. If your site does not declare dark mode support, Safari will now decide how your colors, logos and gradients look in the dark. This guide explains how the feature works, how to tell Safari you already support dark mode, how to opt out, and how to build a proper dark theme with modern CSS such as color-scheme and light-dark().

What Adaptive Dark Mode does

WebKit’s announcement post explains the motivation: almost 40% of page loads come from users in dark mode, but only about 10% of page loads support it. Adaptive Dark Mode closes that gap.

When enabled by the user, Safari analyses a page and estimates whether it is mostly light or dark:

  • If the page already signals dark mode support with color-scheme, nothing changes.
  • If the page is already dark with light text, nothing changes.
  • If the page is light, Safari transforms it: it inverts the luminosity of colors while keeping hue, aims for WCAG 4.5:1 contrast on text, and converts light gradients to dark.

Most images are left alone, but Safari inspects SVGs and may recolor them, and it inverts simple black-and-white bitmap logos. Effects like masks and mix-blend-mode may be switched off on transformed elements, and <canvas> content is left unchanged.

Users enable it from the system appearance (set to dark) and then accept a preview Safari offers on a bright site.

Your site cannot detect it (by design)

For privacy, Safari prevents websites from detecting that Adaptive Dark Mode has been applied. JavaScript reading computed colors gets the original authored colors, and images drawn into canvas render in their original form. So you cannot “fix it up” with JavaScript after the fact. Your options are all declarative.

Option 1: declare that you support dark mode

If you already have a dark theme, declare it early so Safari leaves your page alone. Use both the meta tag and CSS:

<!-- in <head>, before your stylesheets -->
<meta name="color-scheme" content="light dark">
:root {
  color-scheme: light dark;
}

WebKit specifically recommends declaring this in HTML and/or CSS rather than injecting it later with JavaScript, so the page renders correctly as fast as possible.

Option 2: build a real dark theme with light-dark()

If you do not have a dark theme yet, this is a good time to add one. The light-dark() function picks a value based on the used color scheme, which keeps both themes in one place:

:root {
  color-scheme: light dark;

  --bg:        light-dark(#ffffff, #121417);
  --surface:   light-dark(#f4f5f7, #1c1f24);
  --text:      light-dark(#1b1d21, #e8eaed);
  --muted:     light-dark(#5b616e, #a0a6b1);
  --accent:    light-dark(#0a66c2, #6cb4ff);
  --border:    light-dark(#dde1e6, #2c3138);
}

body {
  background: var(--bg);
  color: var(--text);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
}

a { color: var(--accent); }

light-dark() only works when color-scheme allows both schemes, which is why the declaration sits at the top. For anything that is not a color (for example swapping a background image), use the media query:

@media (prefers-color-scheme: dark) {
  .hero {
    background-image: url("/img/hero-dark.webp");
  }
}

Option 3: a dark area inside a light page

Maybe your marketing site stays light, but your code samples or a dashboard widget should get a hand-made dark style. Apply color-scheme to just that element and style it yourself:

.code-panel {
  color-scheme: light dark;
  background: light-dark(#f6f8fa, #0d1117);
  color: light-dark(#24292f, #c9d1d9);
}

Option 4: opt out with “light only”

Some apps must stay light, for example a print preview, a design tool or a page where brand colors are contractually fixed. Use the only keyword:

<meta name="color-scheme" content="light only">
:root { color-scheme: light only; }

/* or just one element */
.brand-canvas { color-scheme: light only; }

One caveat from WebKit: the only keyword was not yet supported in Safari 27.3 beta 1, and the team asked developers to check back as the feature evolves through the beta. Test it in the latest beta before relying on it.

Make your page transform well anyway

Even if you never ship a dark theme, a few modern practices help Safari’s transformation look good:

  • Use SVG for logos and icons instead of bitmaps, so they can be recolored cleanly.
  • Use CSS colors and gradients instead of tiled background images.
  • Replace image sprites with CSS for rounded corners, shadows and button states.
  • Use transparent backgrounds in content images instead of baking the page color into them.
  • Give containers padding so content does not crowd edges once borders change contrast.

Icons drawn with currentColor are especially robust, because they always match the text color:

<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
  <path fill="currentColor" d="M12 2 2 22h20L12 2z"/>
</svg>
.icon { width: 1.25em; height: 1.25em; color: var(--text); }

Bonus: contrast-aware colors

WebKit’s post also points to color-mix() and contrast-color() for more flexible palettes. color-mix() is a simple way to derive hover and border shades from one token so both themes stay consistent:

.button {
  background: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent), black 20%);
}
.button:hover {
  background: color-mix(in oklab, var(--accent), white 12%);
}

Check browser support for contrast-color() before using it without a fallback.

Testing checklist

  1. Install the Safari 27.3 beta (or a current Safari Technology Preview) and set your system to dark.
  2. Visit your site with no color-scheme: see how Adaptive Dark Mode treats logos, charts and screenshots.
  3. Add color-scheme: light dark and your dark tokens; confirm Safari leaves the page alone.
  4. Test any “light only” sections in the newest beta.
  5. If something looks wrong, WebKit invites site owners to contact its web evangelist team (details are in the announcement post) and users to file a report with Feedback Assistant.

Takeaway

Adaptive Dark Mode means your site will be shown dark to some Safari users whether you planned for it or not. The fix is small and pure CSS: declare color-scheme in HTML and CSS, define colors with light-dark(), use SVG and currentColor for icons, and reserve light only for the rare pages that must never change.