<div class="container">
  <h1>What is even Lorem Ipsum?</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium animi esse molestias autem nemo itaque, ullam sequi impedit, est quae repellendus, necessitatibus nesciunt. In molestias aspernatur quisquam consectetur odio voluptate?
</p>
<p>
  Sapien faucibus et molestie ac feugiat. Ac placerat vestibulum lectus mauris ultrices eros in. <a href="#">Aliquet lectus proin nibh nisl condimentum</a>. Condimentum vitae sapien pellentesque habitant. Aenean sed adipiscing diam donec adipiscing tristique. Tellus cras adipiscing enim eu turpis egestas. At lectus urna duis convallis convallis. Sed viverra tellus in hac habitasse platea. Massa tempor nec feugiat nisl pretium fusce id velit ut. Varius sit amet mattis vulputate enim.
</p>
</div>

<button onclick="toggleDM()">Toggle Dark Mode</button>
:root {
  --color-background: #fff;
  --color-body: #111;
  --color-links: #3d6aff;

  // Dark variables
  --color-background--dark: #282828;
  --color-body--dark: #f2f2f2;
  --color-links--dark: #87a3ff;
}

body {
  background-color: var(--color-background, #fff);
  color: var(--color-body, #111);
  font-family: sans-serif;

  &.dark-mode {
    background-color: var(--color-background--dark, #fff);
    color: var(--color-body--dark, #111);
  }
}

a,
a:visited {
  color: var(--color-links, #3d6aff);
}

.container {
  max-width: 730px;
  margin: 0 auto;
  padding: 0 15px;
}

h1 {
  font-size: 3rem;
}

p {
  font-size: 1.2rem;
  line-height: 1.5;
}

h1 {
  margin-top: 60px;
}

button {
  position: fixed;
  top: 15px;
  right: 15px;
  border: 0;
  padding: 10px 15px;
  border-radius: 20px;
  cursor: pointer;
  background-color: var(--color-background--dark, #fff);
  color: var(--color-body--dark, #111);

  .dark-mode & {
    background-color: var(--color-background, #fff);
    color: var(--color-body, #111);
  }
}
View Compiled
function toggleDM() {
   document.body.classList.toggle("dark-mode");
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.