Сергей Ракипов,
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background-color: #fff;
color: #000;
}
.temny {
background-color: #000;
color: #fff;
}
.blok {
width: 320px;
margin: 0 auto;
}
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
input[type="checkbox"]:focus {
outline: 0;
}
.toggle {
height: 32px;
width: 52px;
border-radius: 16px;
display: inline-block;
position: relative;
margin: 0;
border: 2px solid #FFFFFF;
background-image: linear-gradient(180deg, #2D2F39 0%, #1F2027 100%);
transition: all .2s ease;
}
.toggle:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: white;
box-shadow: 0 1px 2px rgba(44, 44, 44, 0.2);
transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);
}
.toggle:checked:after{
background-color: #000000;
}
.toggle:checked {
border-color: #000000;
background-image: linear-gradient(180deg, #FFFFFF 0%, #DEDEDE 100%);
}
.toggle:checked:after {
transform: translatex(20px);
}
</style>
</head>
<body>
<br><br>
<div class="blok">
<div class="tema_oformlenie">
<input type="checkbox" class="toggle" checked>
</div>
<br><br> Таким образом, укрепление и развитие внутренней структуры говорит о возможностях дальнейших направлений развития. Внезапно, сторонники тоталитаризма в науке освещают чрезвычайно интересные особенности картины в целом, однако конкретные
выводы, разумеется, представлены в исключительно положительном свете. Внезапно, активно развивающиеся страны третьего мира и по сей день остаются уделом либералов, которые жаждут быть превращены в посмешище, хотя само их существование приносит
несомненную пользу обществу.
</div>
<script>
window.addEventListener("load", function() {
let color = localStorage.getItem("tema_st");
const body = document.body, toggle = document.querySelector(".toggle") ;
if (color) {
body.classList.add(color);
toggle.checked = false;
}
toggle.addEventListener("click", function() {
body.classList.toggle("temny");
color = body.classList.contains("temny") ? "temny" : "";
localStorage.setItem("tema_st", color)
})
})
</script>
</body>
</html>