2025/12/13
Since May 2024, this feature works across the latest devices and browser versions. The light-dark() CSS function enables setting two colors for a property - returning one of the two colors options by detecting if the developer has set a light or dark color scheme or the user has requested light or dark color theme - without needing to encase the theme colors within a prefers-color-scheme media feature query.
– https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/light-dark
Also, you can detecte system-level dark mode (and listen for changes) using
const query = window.matchMedia("(prefers-color-scheme: dark)")
const isDark: boolean = query.matches # boolean
query.addEventListener('change', (e): boolean => e.matches)
(h/t https://robkendal.co.uk/blog/2024-11-21-detecting-os-level-dark-mode/)