<div>
  <h1>Prefers Color Scheme</h1>
  <p>Bacon ipsum dolor amet porchetta tongue turkey, doner sirloin chislic biltong. Tri-tip pork chicken, pig brisket ground round pancetta. Burgdoggen beef tail leberkas prosciutto biltong pork loin. Burgdoggen jowl chuck chislic, landjaeger boudin drumstick pastrami prosciutto spare ribs chicken bacon shank. Biltong beef ribs bacon, short loin landjaeger chicken boudin strip steak ham hock andouille rump fatback tri-tip jerky short ribs.</p>
</div>
html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

div {
  padding: 2em;
  display: flex;
  flex-direction: column;
}

h1 {
  margin-top: 0;
}

@media (prefers-color-scheme: light) {
  html, body {
    background-color: #F5F5F5;
    color: #333333;
  }
}

@media (prefers-color-scheme: dark) {
  html, body {
    background-color: #333333;
    color: #F5F5F5;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.