<main>
  <input type="checkbox" id="toggle-theme" />
  <label for="toggle-theme">
    <!-- moon svg -->
    <svg viewBox="0 0 17.295 17.303">
      <path d="M16.373,2.978a.618.618,0,0,0-.608.627v.618h-.618a.618.618,0,1,0,0,1.235h.618v.618a.618.618,0,1,0,1.235,0V5.458h.618a.618.618,0,1,0,0-1.235H17V3.6a.618.618,0,0,0-.627-.627ZM11.03,4.223A8.03,8.03,0,1,0,18.013,16.2a.618.618,0,0,0-.462-.917,7.208,7.208,0,0,1-6.316-7.145,7.126,7.126,0,0,1,.671-3.018.618.618,0,0,0-.536-.877l-.1-.006C11.188,4.228,11.109,4.223,11.03,4.223Zm7.4,4.109a.618.618,0,0,0-.608.627v.618h-.618a.618.618,0,1,0,0,1.235h.618v.618a.618.618,0,1,0,1.235,0v-.618h.618a.618.618,0,1,0,0-1.235h-.618V8.958a.618.618,0,0,0-.627-.627Z" transform="translate(-3 -2.978)" />
    </svg>
    <!-- sun svg -->
    <svg viewBox="0 0 20.273 20.284">
      <g transform="translate(-226.488 -101.493)">
        <g transform="translate(-21 66)">
          <path d="M14.124,3.978a.76.76,0,0,0-.748.771V6.27a.76.76,0,1,0,1.521,0V4.75a.76.76,0,0,0-.772-.771ZM7.5,6.728a.76.76,0,0,0-.53,1.306L8.044,9.109A.761.761,0,1,0,9.12,8.033L8.045,6.958A.76.76,0,0,0,7.5,6.728Zm13.253,0a.76.76,0,0,0-.523.23L19.153,8.033a.761.761,0,0,0,1.076,1.076L21.3,8.034a.76.76,0,0,0-.553-1.306ZM14.136,8.551a5.575,5.575,0,0,0-5.575,5.575,7.074,7.074,0,0,0,.057.8A5.5,5.5,0,0,0,14.136,19.7a6.034,6.034,0,0,0,1.926-.342,5.478,5.478,0,0,0,3.649-5.233A5.575,5.575,0,0,0,14.136,8.551ZM4.76,13.365a.76.76,0,1,0,0,1.521h1.52a.76.76,0,1,0,0-1.521Zm17.232,0a.76.76,0,1,0,0,1.521h1.52a.76.76,0,1,0,0-1.521ZM8.566,18.913a.76.76,0,0,0-.523.23L6.969,20.217a.761.761,0,0,0,1.076,1.076L9.12,20.218a.76.76,0,0,0-.553-1.306Zm11.116,0a.76.76,0,0,0-.53,1.306l1.075,1.075A.761.761,0,0,0,21.3,20.217l-1.075-1.075a.76.76,0,0,0-.546-.23Zm-5.558,2.3a.76.76,0,0,0-.748.771V23.5a.76.76,0,1,0,1.521,0v-1.52a.76.76,0,0,0-.772-.771Z" transform="translate(243.488 31.515)" />
        </g>
      </g>
    </svg>
  </label>
</main>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100%;

  display: grid;
  place-items: center;
}

label {
  height: 100px;
  width: 100px;

  display: inline-block;

  background-color: #2a2d42;

  border-radius: 50%;

  padding: 10px;

  position: relative;

  transition: 0.6s ease-in-out;

  cursor: pointer;
}

label svg {
  height: 60px;
  width: 60px;

  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  transition: 0.4s ease-in-out;
}

label svg:first-child {
  fill: white;
}

label svg:last-child {
  fill: #2a2d42;
  opacity: 0;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked + label {
  background-color: white;

  transform: rotate(360deg);

  box-shadow: 0px 0px 0px 900px #2a2d42;
}

input[type="checkbox"]:checked + label svg:first-child {
  opacity: 0;
}

input[type="checkbox"]:checked + label svg:last-child {
  opacity: 1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.