Your System Preference

☀️

LIGHT MODE

Your system is set to an unknown mode

Color Scheme

unknown

How to use in CSS

@media (prefers-color-scheme: dark) {
  body { background: #000; color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

How it works

This tool uses CSS media queries via window.matchMedia() to detect your operating system's display preferences. These settings are configured in your device's system preferences (Settings → Display or Accessibility) and are automatically shared with websites so they can adapt their appearance. No data is sent anywhere — detection is entirely client-side.