Dark / light mode switch

CSS - svgcka ve Freelance

.darkmode_switch {
position: relative;
display: inline-block;
width: 50px;
height: 26px;
}

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

.darkmode_switch .slider {
position: absolute;
top: 0; left: 0;
right: 0; bottom: 0;
background-image: url("/user/documents/upload/darkmode_switch_bg.svg");
transition: .4s;
border-radius: 26px;
background-size: 200% 100%;
background-position: left;
}

.darkmode_switch .slider:before {
position: absolute;
content: "";
height: 20px; width: 20px;
left: 3px;
bottom: 3px;
background-image: url("/user/documents/upload/darkmode_switch_toggle.svg");
transition: .4s;
border-radius: 50%;
background-size: 200% 100%;
background-position: left;
}

.darkmode_switch input:checked + .slider {
background-position: right;
}

.darkmode_switch input:checked + .slider:before {
transform: translateX(24px);
background-position: right;
}

Scripty

<script>
$('<label class="darkmode_switch"> <input type="checkbox" id="modeToggle"> <span class="slider"></span> </label>').prependTo('.navigation-buttons');
document.getElementById('modeToggle').addEventListener('change', function() {
document.body.classList.toggle('darkmode');
});
</script>