Не могу правильно записать.
Вот есть переключатель что бы менял оформление с темного на светлое, ну и запоминал это. Я сделал переключатель вроде в локал записывает но не запоминает.
<!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 #474755;
background: 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: 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 {
border-color: #654FEC;
}
.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.onload = function () {
if ( localStorage.getItem( "tema_st" ) !== null ) {
let color = localStorage.getItem( "tema_st" );
document.getElementsByTagName( "body" )[ 0 ].classList.add = color;
}
}
document.querySelector(".toggle").onclick = function (){
document.getElementsByTagName("body")[0].classList.add = "temny";
localStorage.setItem("tema_st", "temny");
}
const tema = document.getElementsByTagName( "body" )[ 0 ];
perek = () => {
tema.classList.toggle( "temny" );
}
tema.addEventListener( "click", perek );
</script>
</body>
</html>
