Well, Today I'll show you how to make " Theme Selector "
Result: 
Add jQuery
jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
add Themes btns
So how we can add it, and how much?
as much as you want, if you want to add 3 btns u can.
go to index.html and add ul with class switch-color
.then : inside the ul tag.
add as much as you want li tag, with attribute data-color
<li data-color="COLOR"></li>
How We'll use it?
well, for example:
We'll get this:
So, now we have to add CSS
CSS
First, we will add :root that it will change when we click the theme btns
:root {
--maincolor: #080; // Original Theme
}
Quick CSS code
.switch-color li {
display: inline-block;
width: 20px;
height: 20px;
cursor: pointer;
transition: 0.5s;
}
and then style for the li
.switch-color li:first-child {
background-color: #b71540;
color: white;
}
.switch-color li:nth-child(2) {
background-color: #0c2461;
}
.switch-color li:nth-child(3) {
background-color: #3c6382;
}
.switch-color li:nth-child(4) {
background-color: #079992;
}
.switch-color li:nth-child(5) {
background-color: #e58e26;
}
.switch-color li:nth-child(6) {
background-color: #8e44ad;
}
.switch-color li:nth-child(7) {
background-color: #2c3e50;
color: black;
}
Result:
Now we want some content to test the btns.
Content
Soo quick code HTML & CSS for Content
HTML
<div class="main">
<h2>Title</h2>
<div class="main-content">
Content
</div>
</div>
CSS
main h2 {
color: var(--maincolor); // From => :root
}
.main-content {
background-color: var(--maincolor); // From => :root
color: #fff;
padding: 20px;
}
Result:
JavaScript
$(function() {
$(".switch-color li").on("click", function() {
$(":root").css("--maincolor", $(this).data("color"));
});
});
Explain: in click one of ul items. it will change --maincolor in :root to the data from the clicked li.
That's it :)
Top comments (2)
You don't need jQuery for that, or anything at all...
Well, thanks for the note.