حالت آیکون های شب و روز در وبسایت

سلام

HTML

<div class="toggle">
    <input type="checkbox"/>
    <label></label>
</div> 

CSS

.toggle {
  position: relative;
  box-sizing: border-box;
}
.toggle input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.toggle label {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.toggle label:before {
  content: '';
  width: 70px;
  height: 40px;
  background: #fff;
  border: 2px solid #DDD;
  box-shadow: inset -30px 0 0 #666;
  position: relative;
  display: inline-block;
  border-radius: 20px;
  box-sizing: border-box;
  transition: 0.25s ease-in;
}

.toggle label:after {
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  left: 10px;
  top: 10px;
  border-radius: 50%;
  background: #FFF;
  box-shadow: inset -8px -5px #333;
  transition: 0.2s ease-in-out;
}

.toggle input[type="checkbox"]:checked + label:before {
  box-shadow: inset 30px 0 0 #ffeb00;
}
.toggle input[type="checkbox"]:checked + label:after {
    box-shadow: inset 0 0 0 2px #FFF;
    background: #ffbc00;
    left: 39px;
    top: 8px;
    border: 2px dashed #FFF;
}