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:
<meta name="color-scheme" content="light dark">:root { color-scheme: light dark }@media (prefers-color-scheme: dark) { }<picture><source media="(prefers-color-scheme: dark)">light-dark()Newer CSS functions like
color-mix()andcontrast-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.orgOpen Source Web Browser Engine