CodePen Embed - (almost) pure css night/day toggle

<div class="container">
  <!--  <img src="https://cdn.dribbble.com/users/426215/screenshots/5321869/toggle1.gif" alt=""> -->
  <input type="checkbox" id="toggle-checkbox" class="toggle-checkbox">
  <label for="toggle-checkbox" class="toggle-wrapper">
    <div class="toggle-thumb">
      <div class="crater-1"></div>
      <div class="crater-2"></div>
      <div class="crater-3"></div>
    </div>

    <div class="toggle-container">
      <div class="toggle-night">
        <div class="astronaut"></div>
        <ul class="stars">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>

      <div class="toggle-day">
        <div class="surfer"></div>
        <ul class="waves">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>  
    </div>
  </label>
  <p class="inspired-by-day">Inspired by dribbble from <a href="https://dribbble.com/shots/5321869-Playing-with-InVision-Studio" target="_Blank">Bojan Mesar</a></p>
  <p class="inspired-by-night">Inspired by dribbble from <a href="https://dribbble.com/shots/5321869-Playing-with-InVision-Studio" target="_Blank">Bojan Mesar</a></p>
</div>

$toggle-h: 20rem;
$toggle-w: 50rem;
$thumb-size: $toggle-h*1.1;

$crater1-w: 4.1;
$crater1-h: 3.6;
$crater2-w: 3.8;
$crater2-h: 4;
$crater3-w: 2.1;
$crater3-h: 1.5;

$wave-size: $thumb-size*0.35;
$star-size: 0.6rem;

$ocean-color:#40B5F8;

:root{
  //day
  --thumb-color:#FFCC33;
  --toggle-h:#{$toggle-h};
  --toggle-w:#{$toggle-w};
  --thumb-size:#{$thumb-size};

  --crater1-w: #{$crater1-w};
  --crater1-h: #{$crater1-h};
  --crater2-w: #{$crater2-w};
  --crater2-h: #{$crater2-h};
  --crater3-w: #{$crater3-w};
  --crater3-h: #{$crater3-h};
  
  --wave-size: #{$wave-size};
  --star-size: #{$star-size};
}

*{
  transition:1s all ease-in-out;
}

HTML{
  font-size:10px;
}

.container{
  width:100vw;
  height:100vh;
  position:relative;
  background:#D6E7F7;
  font-family:'Pacifico', cursive;
  will-change: color;
  
  .inspired-by {
    &-day {
      left: 0;
    }
    &-night {
      font-family:'Staatliches', cursive;
      letter-spacing:0.1rem;
      color:#FFF;
      left: -$toggle-w*2;
      opacity: 0;
    }
  }
  
  &.nighttime{
    background-color:#151D29;
    .inspired-by-night {
      
    }
    A{
      box-shadow:none;
    }
  }
  
  P, A{
    //transition:none;
  }
  P{
    color:#000;
    font-size:1.7rem;
    height:3rem;
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:calc(var(--toggle-h) * 1.5);
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    text-shadow:0.1rem 0.1rem 0.1rem rgba(255, 255, 255, 1);
     -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    a{
      color:gold;
      margin-left:0.5rem;
      text-shadow: 0rem 0rem 0.2rem rgba(0, 0, 0, 0.5);
    }
  }
  @media (max-width: 849px) {
    $toggle-h: $toggle-h/2;
    $toggle-w: $toggle-w/2;
    $thumb-size: $thumb-size/2;
    $wave-size: $wave-size/2;
    $star-size: $star-size/2;
    --toggle-h: #{$toggle-h};
    --toggle-w: #{$toggle-w};
    --thumb-size: #{$thumb-size};
    --wave-size: #{$wave-size};
    
    --star-size: #{$star-size};
    
    .toggle-thumb {
      width: $thumb-size;
      width: var(--thumb-size);
      height: $thumb-size;
      height: var(--thumb-size);
      .crater {
        &-1, &-2, &-3 {
          $crater1-w: $crater1-w/2;
          --crater1-w: #{$crater1-w};
          $crater1-h: $crater1-h/2;
          --crater1-h: #{$crater1-h};
          $crater2-w: $crater2-w/2;
          --crater2-w: #{$crater2-w};
          $crater2-h: $crater2-h/2;
          --crater2-h: #{$crater2-h};
          $crater3-w: $crater3-w/2;
          --crater3-w: #{$crater3-w};
          $crater3-h: $crater3-h/2;
          --crater3-h: #{$crater3-h};
        }
      }
    }

  }
}

.toggle{
  &-wrapper{
    position:absolute;
    width:$toggle-w;
    width:var(--toggle-w, #{$toggle-w});
    height:$toggle-h;
    height:var(--toggle-h, #{$toggle-h});
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    border-radius:$toggle-h;
    border-radius:var(--toggle-h, #{$toggle-h});
    display:flex;
    align-items:center;
    cursor:pointer;
  }
  &-container{
    position:absolute;
    overflow:hidden;
    width:100%;
    height:100%;
    border-radius:$toggle-h;
    border-radius:var(--toggle-h, #{$toggle-h});
  }
  &-thumb{
    width:$thumb-size;
    width:var(--thumb-size);
    height:$thumb-size;
    height:var(--thumb-size);
    border-radius:50%;
    position:absolute;
    z-index:10;
    background:gold;
    //multiple blank box-shadows to fully support the transition
    box-shadow:0 0 5rem 0.5rem gold,
    inset 0 0 0 0.5rem rgba(#c5c6c5, 0),
    inset 0 0 0 0.1rem rgba(#cecece, 0),
    inset 0 0 0 0.1rem rgba(#d6d6d6, 0),
    inset 0 0 0 0.2rem rgba(#dedede, 0),
    inset 0 0 0 0.2rem rgba(#e7e7e8, 0),
    inset 0 0 0 0.3rem rgba(#e7e7e8, 0);
    left:-0.6rem;
    transform:rotate(-270deg);
    .crater{
      &-1, &-2, &-3{
        background:#E7E7E8;
        background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHUlEQVQYV2O8detWmpqa2iwYzcjAwMCALMhIUAUAAJId7b0H06UAAAAASUVORK5CYII=);
        position:absolute;
        border-radius:50%;
        box-shadow:inset 0.1rem 0.1rem 0.3rem 0.1rem #D6D6D6;
        opacity:0;
      }
      &-1{
        width: #{$crater1-w}rem;
        width:calc(var(--crater1-w) * 1rem);
        height: #{$crater1-h}rem;
        height: calc(var(--crater1-h) * 1rem);
        top:15%;
        left:25%;
        transform:skew(-15deg);
      }
      &-2{
        width: #{$crater2-w}rem;
        width:calc(var(--crater2-w) * 1rem);
        height: #{$crater2-h}rem;
        height: calc(var(--crater2-h) * 1rem);
        top:50%;
        right:10%;
      }
      &-3{
        width: #{$crater3-w}rem;
        width:calc(var(--crater3-w) * 1rem);
        height: #{$crater3-h}rem;
        height: calc(var(--crater3-h) * 1rem);
        bottom:15%;
        left:30%;
      }
    }
  }
  &-day, &-night{
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    border-radius:$toggle-h;
    border-radius:var(--toggle-h, #{$toggle-h});
    overflow:hidden;
  }
  &-day{
    left:0;
    opacity:1;
    .waves{
      $wave-no:7;
      list-style:none;
      height:100%;
      width:100%;
      background:$ocean-color;
      position:absolute;
      //top: 0;
      bottom:0;
      right:0;
      margin:auto;
      white-space:nowrap;
      text-align:right;
      li{
        width:$wave-size;
        width: var(--wave-size);
        height:80%;
        border-radius:0 0 var(--wave-size) var(--wave-size);
        display:inline-block;
        background:red;
        position:relative;
        margin:0 -1rem;
        margin: 0 calc(var(--wave-size) / -10);
        background:linear-gradient(to bottom, #99CCFF 0%, #FFFFFF 100%);
      }
    }
    .surfer{
      width:3.5rem;
      height:3.5rem;
      background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/66763/surfer1.png);
      background-size:cover;
      position:absolute;
      right:30%;
      bottom:40%;
      z-index:10;
      //transform: scale(-1, 1)
    }
  }
  &-night{
    left:calc(calc(100% - calc(var(--thumb-size) - 0.6rem)) * -1);;
    background:linear-gradient(to bottom, #003333 0%, #6666CC 100%);
    opacity:0;
    .astronaut{
      width:4.6rem;
      height:3.5rem;
      background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/66763/astronaut.png);
      background-size:cover;
      position:absolute;
      left:-5%;
      bottom:5%;
      z-index:10;
      transform:rotate(-360deg);
    }
    .stars{
      //background: red;
      width:100%;
      height:100%;
      position:absolute;
      top:0;
      left:0;
      li{
        width:$star-size;
        width: var(--star-size);
        height:$star-size;
        height: var(--star-size);
        background:#E7DEC7;
        position:absolute;
        transform:rotate(45deg) translateY(-10000%) translateX(-5000%);
        &:nth-child(1){
          top:18%;
          left:23.60%;
          opacity:1;
        }
        &:nth-child(2){
          top:32.8%;
          left:11.60%;
          opacity:0.8;
        }
        &:nth-child(3){
          top:28%;
          left:41.60%;
          opacity:0.8;
        }
        &:nth-child(4){
          top:47.8%;
          left:35.60%;
          opacity:0.6;
        }
        &:nth-child(5){
          top:58%;
          left:19.60%;
          opacity:0.6;
        }
        &:nth-child(6){
          top:68%;
          left:47.60%;
          opacity:0.4;
        }
        &:nth-child(7){
          top:73%;
          left:7.60%;
          opacity:0.2;
        }
        &:nth-child(8){
          top:78%;
          left:29.5%;
          opacity:0.2;
        }
      }
    }
  }
  &-checkbox{
    display:none;
    &:checked{
      & + .toggle-wrapper{
        .toggle-thumb{
          transform:rotate(0);
          left:calc(100% - calc(#{$thumb-size} - 0.6rem));
          left:calc(100% - calc(var(--thumb-size) - 0.6rem));
          background-color:#F7F7F7;
          box-shadow:0 0 0 0 gold,
          inset 0 0 0 0.5rem rgba(#c5c6c5, 0.5),
          inset 0 0 0 1.0rem rgba(#cecece, 0.5),
          inset 0 0 0 1.5rem rgba(#d6d6d6, 0.5),
          inset 0 0 0 2.0rem rgba(#dedede, 0.5),
          inset 0 0 0 2.5rem rgba(#e7e7e8, 0.5),
          inset 0 0 0 3.0rem rgba(#e7e7e8, 0.5);
          .crater-1, .crater-2, .crater-3{
            opacity:1;
          }
        }
        .toggle-day{
          //day not visible
          left:calc(100% - calc(var(--thumb-size) - 0.6rem));
          opacity:0;
          .surfer{
            bottom:-100%;
          }
          .waves{
            height:200%;
            bottom:-100%;
          }
        }
        .toggle-night{
          //night visible
          left:0;
          opacity:1;
          .astronaut{
            left:25%;
            bottom:35%;
            z-index:10;
            transform:rotate(15deg);
          }
          .stars li{
            transform:rotate(45deg);
          }
        }
      }
    & ~ .inspired-by {
      &-day {
        left: $toggle-w*2;
        opacity: 0;
      }
      &-night {
        left: 0;
        opacity: 1;
      }
    }
    }
  }
}

View Compiled

//inspired by https://dribbble.com/shots/5321869-Playing-with-InVision-Studio

$('#toggle-checkbox').click(function(){
  $('.container').toggleClass('nighttime');
})

This Pen is owned by Lurx on CodePen.

See more by @lurx on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js