<div class="wrap">
  <h1>Dark Mode</h1>
  <p>
    Lorem ipsum dolor sit amet, adipiscing consectetur elit.
  </p>
  <p>
    <a class="btn" href="#">Button</a>
  </p>
</div>

:root {
  --main-text: #333;
  --main-bg: #fff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --main-text: #ddd;
    --main-bg: #000;
  }
}
body {
  color: var(--main-text);
  background-color: var(--main-bg);
  transition: .5s;
}

@import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');
.wrap {
  text-align: center;
  padding: 2rem;
  font-family: 'Playfair Display', serif;
}
h1 {
  font-size: 3rem;
}
p {
  font-size: 1.5rem;
  line-height: 1.5;
}
h1, p {
  margin-bottom: 1rem;
}
a {
  color: #0bd
}
.btn {
  background: #0bd;
  padding: 6px 20px;
  border-radius: 5px;
  display: inline-block;
  color: #fff;
  text-decoration: none;
}