custom style for checkbox to switch between Dark/Light theme (https://jsfiddle.net/saphidev/uom9wL0f/)

dark-light-switch-button.css

.switch{
    position: relative;
    display: block;
    width: 26px;
    padding: 1px;
    height: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;  
}

.switch input{
  opacity: 0;
  position: absolute;
  width: 26px;
  z-index: 99;
}

.switch input + .handle{
  --handle-left: 0;
  --handle-emoji: "🌝";
  --handle-rotate: rotate(0deg);
}

.switch input:checked + .handle{
    --handle-left: 12px;
    --handle-emoji: "🌚";
    --handle-rotate: rotate(360deg);
}

.switch .handle{
  position: absolute;
  width: 12px;
  height: 12px;
  left: var(--handle-left);
  border-radius: 6px;
  transition: 0.6s;
  margin: 0;
  padding: 0;
}

.switch .handle::after{
  transition: 0.8s;
  font-size: 12px;
  content: var(--handle-emoji);
  position: absolute;
  top: -2px;
  transform: var(--handle-rotate);
}

switch.html

<span class="switch">
<input type="checkbox" />
<span class="handle"></span>
</span>