День/Ночь на сайте, смена темы по клику на jQuery
Ниже представлен простой способ реализации переключателя темы (светлая/тёмная) на CSS и jQuery.
Код HTML:
<div class="toggle"></div>
<div class="content">
<!-- Some code -->
</div>
Код CSS:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
transition: .4s;
}
body.night{
background: #00151f;
transition: .4s;
}
.toggle {
position: absolute;
top: 40px;
right: 50px;
background: #FFF;
border: 2px solid #00151f;
height: 20px;
width: 45px;
cursor: pointer;
border-radius: 20px;
}
.toggle:before{
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: #00151f;
border-radius: 50%;
transition: .5s;
}
.toggle.active:before{
left: 27px;
background: #FFF;
}
.toggle.active{
background: #00151f;
border: 2px solid #FFF;
}
.content{
margin: 100px auto;
width: 1000px;
}
.content h1{
margin: 0 0 20px;
padding: 0;
color: #000;
transition: .3s;
}
.content h1{
margin: 0 0 20px;
padding: 0;
color: #000;
transition: .3s;
}
.content p{
color: #000;
transition: .5s;
font-size: 16px;
}
body.night .content h1{
color: #FFF;
}
body.night .content p{
color: #FFF;
}
Код jQuery:
<script>
$(function () {
$('.toggle').on('click' ,function(event) {
$(this).toggleClass('active');
$('body').toggleClass('night');
});
});
</script>
Предыдущая запись
Адаптивное многоуровневое горизонтальное меню на CSS + jQueryСледующая запись
jQuery скрипты для компонентов Bulma