Dark Mode with Web Standards

8 hours ago

Use the 'prefers-color-scheme' media query in CSS to respect OS settings, but also allow users to override with a per-site toggle.
Set the default color scheme via a <meta> tag in HTML for faster loading, with values 'light', 'dark', or 'light dark' (reverting to OS).
Update the color scheme dynamically with JavaScript and store user preferences in localStorage for persistence.
The 'color-scheme' affects system colors, scrollbars, default element colors, iframes, and SVGs using 'light-dark()' or 'prefers-color-scheme'.
There's a disconnect: 'prefers-color-scheme' reflects OS settings regardless of 'color-scheme', limiting its use for in-page toggles.
Exceptions where 'color-scheme' affects 'prefers-color-scheme' include iframes and SVGs, but browser support varies (e.g., Safari has bugs).
The 'light-dark()' function now supports gradients and images in modern browsers, allowing different backgrounds based on the color scheme.
For non-color changes (like box-shadow to border), use CSS custom properties and style queries to detect dark mode, though native support is pending.
Future proposals may allow overriding 'prefers-color-scheme' via JavaScript, but browser team opposition (e.g., Safari) exists.

Hasty Briefsbeta