how to change theme of multiple pages with one switch?

Demo of Day and Night Themes

Night Mode Off
Turn on the night mode to change the background to dark.

body, .container {
height:100vh;
}
.container {
width: 100%;
display: flex;
justify-content: center;
animation-name: daytransition;
animation-duration: 3s;
}
@keyframes daytransition {
from {
background-color: #040018;
}
to {
background-color: #fff;
}
}
.text {
position: absolute;
top: 30%;
font-size: 20px;
text-align: center;
}
.p-lg {
font-size: 28px;
}
.p-sm {
margin: 30px;
}
.night {
animation-name: nighttransition;
animation-duration: 3s;
background-color: #040018 !important;
}
@keyframes nighttransition {
from {
background-color: #fff;
}
to {
background-color: #040018;
}
}
.text-night {
color: #c5b2cc;
}
.btn {
margin: 30px;
background-color: #6f6f8e !important;
color: #FBFFC9 !important;
}
.btn-night {
background-color: #FBFFC9 !important;
color: #6f6f8e !important;
}

$(document).ready(function() {
$(“.btn”).click(function() {
if ($(“.container”).hasClass(“night”)) {
$(“.container”).removeClass(“night”);
$(“.btn”).removeClass(“btn-night”).text(“Night Mode Off”);
$(“.text”).removeClass(“text-night”);
$(“.p-sm”).text(“Turn on the night mode to change the background to dark.”);
} else {
$(“.container”).addClass(“night”);
$(“.btn”).addClass(“btn-night”).text(“Night Mode On”);
$(“.text”).addClass(“text-night”);
$(“.p-sm”).text(“Night mode is active. Turn off the night mode to change the background to light.”);
}
});
});

Read more here:: how to change theme of multiple pages with one switch?

Leave a Reply

Your email address will not be published. Required fields are marked *