Using System Preferences To Set Dark/Light Mode

NOTE: It doesn't look like there's a good way to check the user's preference for light or dark and ajust via an override. That is, you can setup to use the system setting, but if they override it, that would make a flash of unstyled content if they chose the non-default the next time they came back. This will work with the system setting though. And, I think, will work without the flash since it loads in from the CSS directly.

Details

• The example below is built directly from the HTML and JavaScript code snippets that follow

EXAMPLE

CSS

body {
  color: #3c4048;
  background-color: #eaeaea;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #3c4048;
    color: #eaeaea;
  }
}

References