Light and Dark
Переключение темы сайта. С помощью чекбокса, а у чекбоксов через консоль разработчика прослеживается состояние: checked. Булевым значением. Прослушка тру включит одну из тем, фолс соответственно тему отключит, из двух значений логика ясна.
В примере скрипта прослушка стоит через addEventListener(‘click’,()=>{ анонимная функция подставляет динамические переменные: var(--light-bg-color) на бэкграунд и фонт. }); Логика простая, можно обойтись и без переменных css, но они есть и при модификации изменив цветовую схему в одном месте поменяется все.
<script type="text/javascript">
let cat = localStorage.getItem('myCat');
window.addEventListener('DOMContentLoaded',()=>{
console.log('LoadedOk');
if(cat){
document.querySelector('main').style.cssText=`color:var(--dark-font-color);background:var(--dark-bg-color);`
document.querySelector('#info').innerHTML=`dark theme`;
document.querySelector('input[type="checkbox"]').setAttribute(':checked', 'true');
console.log(document.querySelector('input[type="checkbox"]').hasAttribute(':checked'));
}
})
document.querySelector('input[type="checkbox"]').addEventListener('change',()=>{
console.log(document.querySelector('input[type="checkbox"]'));
if(document.querySelector('input[type="checkbox"]').checked==true){
localStorage.setItem('myCat', 'Tom');
console.log('Checked True');
document.querySelector('main').style.cssText=`color:var(--dark-font-color);background:var(--dark-bg-color);`
document.querySelector('#info').innerHTML=`dark theme`;
}else if(document.querySelector('input[type="checkbox"]').checked==false){
console.log("checked False");
localStorage.removeItem('myCat'); // вернёт undefined
document.querySelector('main').style.cssText=`color:var(--light-font-color);background:var(--light-bg-color);`
document.querySelector('#info').innerHTML=`Ligth theme`;
}
})
</script>
Скрипт темной и светлой темы для сайта, скачать пример с гитхаба из открытого репозитория.
https://amir248.github.io/dark-light/Когда кажется что это проще простого, тут и возникает очень интересная задача! Именно: прослушка измененных изменений, если они были изменены; гениальная запись в локалСторож; Изящная прослушка самого чекбокса на установление булева значения. И это куда интересней чем проходить тестовые задания frontend developer на хедхантере. Сложного вроде ничего нет, благодаря сайту мазилы скопипастить. Если мой* кот будет в локал стораж, то тема темная, иначе нет. Переменная ката с условием так и есть: if(cat) - где переменная ссылается на локал страж. Гениально!
В браузерах такая тенденция, успех экзистенциализировался! чеки пропадает только в хроме, в мозиле же все ок.
*отдельная благодарность коту, за то что он поприсутствовал в этом посте, в мифическом смысле. Но и различные персонажи зная меня лично. Будут кричать с пеной у рта: “Ошибся, неуч! Неправильно пишешь! коД пишется с буквой Д”. Только увы, все правильно. Под котом я подразумевал именно кота, а код предствлен на гитхабе со ссклой: script на гитхабе
ChikChicly SpaceHands ForsmaZhorovich
to list