21 days 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.