Добрый день реализовал у себя на блоге toggl день/ночь

$('#toggle-box-checkbox').on('change', function(){
  if(this.checked){
    $('#main').addClass('night');
  }else{
    $('#main').removeClass('night');
  }
});





// run demo if in searchresult preview
function demo(){
    setInterval(function(){
      $("#toggle-box-checkbox").trigger('click');
    }, 1000);
}
if (document.location.pathname.indexOf('fullcpgrid')>-1){
  demo();
}

/* main */

#main {
  float: left;
  background-color: #f6f6f6;
  border-top: 2px solid silver;
  font-size: 1.3em;
  background-image: linear-gradient(to bottom, #FFFFFF 30%, #88D9FF, #24206C, #222 80%);
    color: #333;
    background-size: 100% 400%;
    background-position: 100% 0%;
    transition: all 1s;
}

#main.night {
    background-position: 100% 100%;
    color: #fff; }

@media (min-width: 1401px) {
  #main {
    padding: 100px 20%;
    width: 60%;
  }
}

@media (max-width: 1400px) {
  #main {
    padding: 100px 10%;
    width: 80%;
  }
}

@media (max-width: 700px) {
  #main div {
    width: 98%!important;
    margin-bottom: 20px;
  }
}

#main div {
  width: 48%;
  margin-right: 2%;
  float: left;
}

#main h2 {font-size: 3em}
#main span {color: #a0a0a0}


/* toggl */
.toggle-box {
 width: 100%;
 height: auto;
}

.toggle-box-label-left:empty {
    margin-left: -10px;
}

.toggle-box-label-left:before,
.toggle-box-label-left:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  /*transition*/
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
    outline: none;
}

.toggle-box input[type=checkbox],
.toggle-box input[type=checkbox]:active {
    position: absolute;
    top: -5000px;
    height: 0;
    width: 0;
    opacity: 0;
    border: none;
    outline: none;
}

.toggle-box label {
    display: inline-block;
    position: relative;
    padding: 0px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 16px;
    cursor: pointer;
    color: rgba(149, 149, 149, 0.51);
    font-weight: normal;
}

.toggle-box-label-left:before {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    line-height: 34px;
    text-indent: 40px;
    height: 16px;
    width: 16px;
    margin: 4px;
  /*border-radius*/
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    right: 26px;
    bottom: 0px;
    background: #FFB200;
    transform: rotate(-45deg);
    box-shadow: 0 0 10px white;
}

.toggle-box-label-left:after {
    content: "";
    display: inline-block;
    width: 40px;
    height: 24px;
  /*border-radius*/
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.15);
    vertical-align: middle;
    margin: 0 10px;
    border: 2px solid #FFB200;
}

.toggle-box input[type=checkbox]:checked + .toggle-box-label-left:before {
  /*left: -70%;*/
    right: 17px;
    box-shadow: 5px 5px 0 0 #eee;
    background: transparent;
}

.toggle-box input[type=checkbox]:checked + .toggle-box-label-left:after {
  left: -70%;
    background: rgba(0, 0, 0, 0.15);
    border: 2px solid white;
}

.toggle-box input[type=checkbox] + .toggle-box-label-left {
  /*top: -65px;*/
  /*left: -70%;*/
    color: rgba(250, 250, 250, 0.51);
    font-weight: bold;
}

.toggle-box input[type=checkbox]:checked + .toggle-box-label-left {
  /*top: -65px;*/
  /*left: -70%;*/
    color: rgba(149, 149, 149, 0.51);
    font-weight: normal;
}

.toggle-box input[type=checkbox]:checked + .toggle-box-label-left + .toggle-box-label {
  /*top: -65px;*/
  /*left: -70%;*/
  color: rgba(250, 250, 250, 0.51);
    font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle-box">
  <div id="main">
    <input type="checkbox" name="checkbox1"  id="toggle-box-checkbox"/>
    <label for="toggle-box-checkbox"  class="toggle-box-label-left"></label>
    <label for="toggle-box-checkbox"  class="toggle-box-label"></label>
    <div class="intro">
      <h2>Key information</h2>
      <span>Большой выбор всего, что может вам пригодиться</span>
    </div>
    <div class="text">
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos impedit, ut vero commodi voluptate? Ipsam reiciendis, necessitatibus incidunt ipsa quis sapiente excepturi, optio iusto voluptatibus dolorem officia quidem, numquam eaque minus, autem praesentium rem architecto dolores. Ipsa unde id velit optio magni enim! Illum obcaecati, dolorem distinctio nemo, ipsum iure.</span>
    </div>
  </div>
</div>
</div>