Safari 27.3 Adds Adaptive Dark Mode

Caleb Hailey @calebhailey.com

Adaptive dark mode looks neat!

TL;DR:

For websites that signal support of dark mode with <meta name="color-scheme" content="light dark"> in HTML or color-scheme: light dark in CSS, Adaptive Dark Mode does not change a thing.

I love these posts by the @webkit.org team. In many cases they don't just explain how new features will work, they also share some good best practices. For example:

All the web technology needed to fully support dark mode is widely available today, including:

Newer CSS functions like color-mix() and contrast-color(), plus popular techniques for organizing design systems with CSS variables provide additional options and flexibility.

Be sure to declare dark mode support using the color-scheme meta tag in your HTML head and/or by setting the color-scheme property on :root or body in your CSS. Don’t wait to inject this information later via JavaScript. This best practice helps ensure your site is rendered correctly as fast as possible.

These are solid suggestions. 👌

Introducing Adaptive Dark Mode | WebKit
• @webkit.org

Open Source Web Browser Engine

Join the mailing list

No more than one email per week, no fewer than one per month.