<h2>Prefers color scheme</h2>
<p>The Prefers color scheme @media rule lets us tap into the users OS setting for light and dark mode.</p>
<p>On Mac go to system preferences > General and swith between ligt and dark mode to see the colors in this pen change with it.</p>
<p>On Windows you can go to Settings > Personalization > Colors and under Choose your default app mode, select Dark or light</p>

body {
  display: grid;
  place-content: center;
  margin: 0;
  min-height: 100vh;
  font-family: sans-serif;
  line-height: 1.5rem;;
}

h2, p {
  margin: 0 0 1rem 0;
  max-width: 50ch;
}

/* Your styles for Light mode */
@media (prefers-color-scheme: light) {
  body {
    background-color: hsl(222, 99%, 90%);
    color: hsl(222, 99%, 18%);
  }
}

/* Your styles for Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: hsl(222, 99%, 18%);
    color: hsl(222, 99%, 90%);
  }
}