Date: November 6th, 2026 2:48 PM Author: the wife guy cinematic universe
You can add a **System** option alongside the existing Day and Night modes using the CSS media query `prefers-color-scheme: dark`. JavaScript can detect it with `window.matchMedia('(prefers-color-scheme: dark)')` and automatically enable or disable the site's night mode based on the result. Listen for the media query's `change` event so the site switches themes immediately when the operating system changes appearance.
This works across macOS, iOS, iPadOS, Windows, Linux, and Android in modern browsers. On Apple devices, users can configure automatic appearance changes from sunset to sunrise, and Safari will report the current setting to the website. Windows and other systems work similarly when their appearance settings change, although automatic sunset scheduling may require additional configuration. The website doesn't need location access, sunset calculations, or a timer. It simply follows the operating system's current light/dark preference.