<label class="radikalwp-sw-yinyang"><input type="checkbox" /><span><//span><//label>

.radikalwp-sw-yinyang input { display: none; }
.radikalwp-sw-yinyang span {
  display: block;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(90deg, #0f172a 50%, #f8fafc 50%);
  border: 2.5px solid #0f172a;
  cursor: pointer;
  position: relative;
  transition: transform .5s cubic-bezier(.6, .1, .3, 1.2);
  box-sizing: border-box;
}
.radikalwp-sw-yinyang span::before, .radikalwp-sw-yinyang span::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  top: 8px;
}
.radikalwp-sw-yinyang span::before { right: 5px; background: #f8fafc; }
.radikalwp-sw-yinyang span::after { left: 5px; bottom: 8px; top: auto; background: #0f172a; }
.radikalwp-sw-yinyang input:checked + span { transform: rotate(180deg); }