Изменение цвета всего сайта при нажатии кнопки
У меня сайт на Tilda. Сегодня решил сделать так, чтобы на главной странице сайта была кнопка, при нажатии которой весь сайт (текст, картинки другие элементы) становится чб.
Подскажите пожалуйста, как мне это сделать?
Ответы (1 шт):
Автор решения: Евгений Ли
→ Ссылка
С помощью jquery добавляю и убираю класс и на него цепляю стили.
let darkBtn = $('.btn');
let body = $('body');
darkBtn.on('click', function(){
body.toggleClass('theme-dark');
});
body {
height: 100vh;
}
.block {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
width: 100%;
height: 100%;
background-color: white;
}
p {
color: black;
font-size: 20px;
font-weight: bold;
}
.theme-dark .block {
background-color: black;
}
.theme-dark p {
color: white;
}
.btn {
background-color: blue;
color: white;
padding: 5px 30px;
font-size: 14px;
text-transform: uppercase;
cursor: pointer;
transition: 0.3s;
}
.btn:hover {
background-color: grey;
}
<body>
<div class="block">
<p>Lorem Ipsum Dolor si a'met</p>
<div class='btn'>Button</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</body>