<input type="checkbox" id="setMode">
<div class="page">
  <div class="content">
    Select Mode:
    <label for="setMode">
      <span class="sun"></span>
      <span class="moon"></span>
    </label>
    <span class="mode-type"></span>

    <h1>Some lipsum title</h1>
    <p> Nullam sit amet pulvinar nisl, eu viverra mi. In varius euismod elementum. In quis dignissim nunc. Pellentesque <b>tristique commodo</b> condimentum. Nulla vulputate est a vehicula luctus. Cras ultricies ipsum mauris, suscipit viverra elit rhoncus id. Donec placerat augue eu ipsum volutpat bibendum. Pellentesque finibus pretium nibh et lobortis. Mauris orci nisl, semper eu tincidunt eu, volutpat at lacus. Etiam et enim ante.</p>
    <p>Cras malesuada fringilla commodo. Praesent hendrerit lorem at risus posuere, et elementum sem tempor. Nullam posuere non magna quis mollis. Proin <b>sit amet ante</b> consectetur, feugiat nisl euismod, vulputate urna. Vestibulum id pulvinar dolor. Donec nec aliquet justo, vel pellentesque ipsum. Cras magna odio, pharetra in turpis a, consequat porta dui. Praesent vel nisl ex. Etiam semper pretium eros at vulputate. Nullam sed lorem eu ligula accumsan scelerisque. Proin aliquet, augue eu tincidunt laoreet, erat elit convallis tortor, quis pellentesque orci ex at diam.</p>
    <p>Aenean consequat interdum nisi vel pulvinar. Vivamus congue ligula lorem, nec dignissim orci tempus in. Integer arcu tellus, mollis bibendum dapibus vel, dapibus in ipsum. Praesent varius nunc at pulvinar faucibus. Vivamus consectetur aliquam dui, nec sodales odio <b>interdum sed</b>. Duis fermentum sed orci a elementum. Nunc dolor sapien, auctor quis arcu sed, cursus facilisis risus. Pellentesque ornare congue turpis, dignissim bibendum tortor mollis non. Sed tincidunt ut lacus ut auctor. Suspendisse in vestibulum urna, eu varius ex. Vestibulum egestas elementum nisl, vel aliquam velit sollicitudin eu. Morbi eleifend at ex et aliquam.</p>
    <p><a class="more" href="#">More LInk</a></p>
  </div>
</div>

  html, body {
    height:100%;
    margin: 0;
  }
  #setMode {
    display: none;
  }
  .page {
    width: 100%;
    min-height: 100%;
    font-size: 1.05rem;
    color: #111;
    font-family: serif;
  }
  .content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
  }
  .mode-type:after {
    font-size: 1.25rem;
    content: "Light mode";
  }
  label {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 28px;
    border: 2px solid #171e24;
    line-height: 28px;
    border-radius: 10px;
    background: #999;
    vertical-align: middle;
  }
  label:before {
    position: absolute;
    content: "";
    border-radius: 50%;
    display: inline-block;
    width: 36px;
    height: 36px;
    top: -6px;
    left: 4px;
    background: #ccc;
    z-index: 10;
    border: 2px solid #171e24;

    transition: left 0.4s;
    -webkit-transition: left 0.4s;
  }
  label span {vertical-align: top;}

  .moon {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    overflow: hidden;
    margin: 2px 0 0 18px;
    position: relative;
    display: inline-block;
  }
  .moon:before {
    content: "";
    position: absolute;
    width: 26px;
    height: 25px;
    top: -6px;
    left: 6px;
    border-radius: 50%;
    box-shadow: 0 0 0 12px;
  }
  .sun {
    width: 12px;
    height: 12px;
    border: 2px solid;
    border-radius: 50%;

    box-shadow: -11px 0 0 -6px, 11px 0 0 -6px, 0 -11px 0 -6px, 0 11px 0 -6px, 8px 8px 0 -6px, -8px -8px 0 -6px, 8px -8px 0 -6px, -8px 8px 0 -6px;
    margin: 6px 0 0 12px;
    display: inline-block;
  }

  #setMode:checked + .page {
    background: #171e24;
    color: #ddd;
  }
  #setMode:checked + .page .mode-type:after {
    content: "Dark mode";
  }
  #setMode:checked + .page a, #setMode:checked + .page b {
s    color: #7ec5e5;
  }
  #setMode:checked + .page label:before {
    left: 36px;
  }