Karanlık Mod Geçiş Anahtarı (Smooth)

<label class="theme-switch">
  <input type="checkbox" id="theme-toggle">
  <span class="slider-round">
    <i class="fas fa-sun"></i>
    <i class="fas fa-moon"></i>
  </span>
</label>

.theme-switch { position: relative; display: inline-block; width: 60px; height: 34px; }
.theme-switch input { opacity: 0; width: 0; height: 0; }
.slider-round { position: absolute; cursor: pointer; inset: 0; background: #ccc; transition: .4s; border-radius: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 5px; }
.slider-round i { color: gold; font-size: 14px; z-index: 1; }
.slider-round:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background: white; transition: .4s; border-radius: 50%; z-index: 2; }
input:checked + .slider-round { background: #2a2a35; }
input:checked + .slider-round:before { transform: translateX(26px); }