Getting and using the system's dark mode setting in CSS.

Currently most to all the major operating systems / Window Managers (IOS, Android, Windows, OSX, Gnome, KDE, etc) support a dark mode setting.

Dark Mode

You can access this dark mode setting by using a css media flag

@media (prefers-color-scheme: dark) {   

}

prefers-color-scheme comes with three settings dark, light, and no-preferences

Adding CSS variables to make this magical!

:root {
  --background: #000;
  --font-color: #fff;
}

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

Browser Support?

This is supported by all major browsers with a caveat with Firefox. Firefox supports this feature only if you have privacy.resistFingerprinting turned off in settings. More information about that here MDN Web Docs