<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%);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.