Awesome Dark theme switch

awesome-dark-theme-switch.markdown

Awesome Dark theme switch

A Pen by Mahdyar on CodePen.

License.

index.html

<div class="center">
  <label class="switch">
    <input type="checkbox" onClick="toggle()">
    <span class="slider round"></span>
  </label>
  <label class="mahdyar">
    <p class="cp">Made with &lt;3 by <a href="https://mahdyar.me" target="_blank">Mahdyar</a></p>
  </label>
</div>

script.js

function toggle() {
  document.body.style.backgroundColor =
    document.body.style.backgroundColor == "black" ? "#e0e0e0" : "black";
}

style.css

/*
*
* Inspired by: https://dribbble.com/shots/6844698-Dark-theme-switch-animation
*
* Code by: mahdyar.me
*
*/
body {
  background-color: #e0e0e0;
  width: 100vw;
  height: 100vh;
  display: flex;
  transition: 0.2s;
}

.center {
  text-align: center;
  margin: auto auto;
}

.switch {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 68px;
  -webkit-tap-highlight-color: transparent;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #27173a;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 52px;
  width: 52px;
  left: 8px;
  bottom: 8px;
  background-color: #ffc207;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #27173a;
}

input:focus + .slider {
  box-shadow: 0 0 2px #27173a;
}

input:checked + .slider:before {
  -webkit-transform: translateX(52px);
  -ms-transform: translateX(52px);
  transform: translateX(52px);
  box-shadow: inset -14px 0 0 4px #ffc207;
  background-color: #27173a;
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
.cp {
  font-family: Arial, Helvetica, sans-serif;
  color: #6e6d6d;
}
.cp a {
  color: #27173a;
  text-decoration: none;
  font-weight: bold;
}