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 :)