<div class="container">
  <span class="title">This is a title</span>
  <p class="content">This is some content. I could use Lorem Ipsum here, but I was too lazy to google it and I don't believe CodePen has a built in Lorem Ipsum feature.</p>
</div>
:root{
  font-family: sans-serif;
  --background: #eee;
  --color: #222;
}
.container{
  width: 300px;
  margin: auto;
  padding: 1rem;
  
  background: var(--background);
  color: var(--color);
}
.title{
  font-weight: 600;
  font-size: 1.1rem;
}
.content{
  font-weight: 300;
  font-size: .9rem;
  line-height: 150%;
}

@media (prefers-color-scheme: dark){
  :root{
    --background: #222;
    --color: #eee;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.