Adaptive dark mode in Safari

A new WebKit beta introduces a feature that automatically converts light websites into dark mode. Unlike naive color inversion, the algorithm tries to be smart about it: preserving original hues, keeping text contrast within WCAG guidelines, and adjusting colors across SVG icons and logos.

If a site’s author has not built a dark mode, the browser will do it for them. You can opt out in CSS, though the engine’s authors strongly hint that you are better off building a proper dark theme yourself.

What is under the hood and where the catches are:

Smart Color Engine: Instead of simply inverting rgb(), the browser recalculates colors in the OKLCH color space. That preserves perceived lightness and brand saturation rather than turning a signature blue into toxic yellow.
Context awareness: The algorithm tries to distinguish background elements from content imagery. Photos and videos are left untouched, while vector graphics (<svg>) and background patterns are recolored on the fly.
Opt-out via CSS: If the automatic conversion breaks your design, you can opt out with <meta name="color-scheme" content="light"> or the color-scheme: light CSS property.

Are browsers making decisions for us again?

Personally, I am not a fan of this kind of intervention. We have already been through this with email clients: Gmail has spent years trying to “improve” HTML emails, forcing developers to pile on hacks and hardcode colors with !important just to keep layouts from falling apart.

When a browser starts repainting a design to its own taste, bugs are inevitable:

Transparency and PNG issues: Icons with imperfect alpha channels or white mattes immediately turn into visual mud.
Complex charts and Canvas: Auto-theming often turns dynamic charts and interactive Canvas elements into an unreadable mess.
Broken branding: Design is about atmosphere as much as text legibility. An algorithm does not know the context of your product.

Instead of playing designer and introducing unpredictable fallbacks, browser vendors would do better to focus on developer tooling. Automation will always get things wrong where aesthetics matter.