<input id="darkmode" name="darkmode" type="checkbox">
<main>
  <div class="container">
    <label id="switch" for="darkmode">Switch to</label>
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque aperiam quo nesciunt laboriosam necessitatibus quaerat sint laudantium vitae nulla. Eaque, recusandae asperiores. Asperiores illo unde consequuntur vel eveniet repudiandae? Quis!</p>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. A rerum id veniam, laborum voluptatibus repudiandae similique impedit labore architecto error cum nobis aliquid, unde, aut eaque quas maiores ipsam illum?
    </p>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio neque perferendis provident dicta at velit tempore dolor sapiente aspernatur fugit modi, repellat veniam quae cum, rem pariatur libero aut! Amet veritatis tenetur laborum quae aperiam suscipit molestias consectetur. Cumque atque illum, optio velit placeat neque dolore dignissimos natus, doloremque rerum consequuntur itaque ea voluptates aspernatur repellat veritatis perferendis delectus eius dolores consectetur cupiditate unde. Maiores quidem nulla asperiores dolorum! Minima non, ea quod mollitia dolore quaerat et necessitatibus adipisci, commodi nam eligendi! Fugit corrupti deleniti sunt voluptatibus. Expedita doloremque officiis deleniti qui omnis ipsum perferendis minus alias dolore, quos praesentium!
    </p>
    <p>
      Suscipit unde ab laborum eveniet veniam doloremque tempore sequi repellat, quo, corrupti ducimus quod quam necessitatibus libero velit, perferendis placeat excepturi est! Molestias consequatur quasi quia cum atque quibusdam quos reprehenderit, aliquam tempora beatae animi harum omnis. Iure vitae voluptatibus, nihil autem fugit sint nobis aspernatur ad magni aliquid asperiores! Repellat commodi iure sed pariatur sint, ea soluta veniam fugit delectus accusantium qui voluptate unde quibusdam obcaecati officiis eum fuga maxime. Pariatur quasi magnam, quae corporis temporibus, est non aliquid eum voluptates illo, in laborum delectus debitis deleniti nihil facere tempore. Fugiat laborum temporibus cumque saepe quod eum? Harum placeat eaque beatae quibusdam quas, excepturi ipsa modi, dignissimos ipsam perspiciatis, minus doloremque quidem voluptatem consequuntur a? Natus tempore accusantium ad autem minima amet quod eius, dignissimos nihil quos. Consectetur, in eligendi. Libero, tempora omnis. Laboriosam, ratione. Aperiam error molestiae sequi, suscipit doloribus voluptate blanditiis adipisci inventore nihil, aspernatur dolorum in est nulla ad consequatur ipsum.
    </p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente aut magnam repudiandae!</p>
  </div>
</main>
input#darkmode {
  float: right;
  visibility: hidden;
}

input#darkmode:checked + main {
  --color-main: #e7e8eb;
  --bg-main: #2d2d2d;
  --bg-switch: rgba(240, 246, 252, 0.15);
  --content-switch-after: " Light Mode ☀️"
}

#switch {
  cursor: pointer;
  user-select: none;
  background: var(--bg-switch, rgba(27, 31, 35, 0.05));
  padding: 0.5rem;
  border-radius: 6px;
}

#switch::after {
  content: var(--content-switch-after, " Dark Mode 🌙");
}

main {
  height: 100%;
  padding: 1.5rem clamp(1rem, 5%, 3rem);
  color: var(--color-main, #24292e);
  background-color: var(--bg-main, #fff);
  font-family: sans-serif;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 2.25rem;
}

html,
body {
  padding: 0;
  margin: 0;
}

body {
  min-height: 100vh;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.