In this topic,
We are going to see how to change theme color dynamically with the root variable using jQuery.
I have used bootstrap in this block. so first of all I have added “bootstrap.bundle.min.js “, and “all.min.css” file in the <head></head> tag on index.html file.
And I have included the jQuery link in the <head>..</head>tag on the index.html file.
Step-1: Include the link in the <head>..</head>tag on index.html file.
<link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="all.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="bootstrap.bundle.min.js"></script>
Step-2: Create Html Code in the index.html file.
<body>
<div class="picture2 mt-5">
<div class="container">
<div class="row">
<h1 class="title mt-5 text-center mx-auto">Our Menu</h1>
<div class="list col-12">
<ul class="nav nav-pills mb-5 justify-content-center mt-5" id="profile-tab" role="tablist">
<li class="nav-item ">
<a class="menu position-relative nav-link active text-secondary ml-2" id="profile-tab" data-toggle="pill" href="#pills-1" role="tab"><b>Lorem</b></a>
</li>
<li class="nav-item">
<a class="menu position-relative nav-link text-secondary ml-2" id="profile-tab" data-toggle="pill" href="#pills-2" role="tab"><b>Ipsum</b></a>
</li>
<li class="nav-item">
<a class="menu nav-link position-relative text-secondary ml-2" id="profile-tab" data-toggle="pill" href="#pills-3" role="tab"><b>Lorem</b></a>
</li>
</ul>
</div>
</div>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-1" role="tabpanel" aria-labelledby="pills-tab-1">
<div class="row">
<div class="col-md-6">
<div class="order row mt-5 ">
<div class="Menulistimage col-3 col-lg-2">
<img src="23.jpg" alt="gallery image">
</div>
<div class="position-relative Menulistheading col-9 col-lg-9 p-1 ">
<h5 class=" d-inline-block mt-3"><b>Lorem ipsum dolor</b></h5>
<span class="money text-secondary">
<b>$35.00</b>
</span>
<p class="text-secondary">Meat / Potatoes / Rice / Tomatoe</p>
</div>
</div>
<div class="order row mt-5">
<div class="Menulistimage col-3 col-lg-2 ">
<img src="24.jpg" alt="gallery image">
</div>
<div class="position-relative Menulistheading col-9 col-lg-9 p-1">
<h5 class=" d-inline-blo
ck mt-3"><b>Lorem ipsum dolor</b></h5>
<span class="money text-secondary">
<b>$35.00</b>
</span>
<p class="text-secondary" >Meat / Potatoes / Rice / Tomatoe</p>
</div>
</div>
<div class="order row mt-5">
<div class="Menulistimage col-3 col-lg-2">
<img src="26.jpg" alt="gallery image">
</div>
<div class="position-relative Menulistheading col-9 col-lg-9 p-1">
<h5 class="d-inline-block mt-3"><b>Lorem ipsum dolor</b></h5>
<span class="money text-secondary">
<b>$35.00</b>
</span>
<p class="text-secondary">Meat / Potatoes / Rice / Tomatoe</p>
</div>
</div>
<div class="order row mt-5">
<div lass="Menulistimage col-3 col-lg-2">
<img src="25.jpeg" alt="gallery image">
</div>
<div class="position-relative Menulistheading col-9 col-lg-9 p-1">
<h5 class=" d-inline-block mt-3"><b>Lorem ipsum dolor</b></h5>
<span class="money text-secondary">
<b>$35.00</b>
</span>
<p class="text-secondary">Meat / Potatoes / Rice / Tomatoe</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 ">
<div class="order row mt-5">
<div class="Menulistimage col-3 col-lg-2">
<img src="28.jpg" alt="gallery image">
</div>
<div class="position-relative Menulistheading col-9 col-lg-9 p-1">
<h5 class=" d-inline-block mt-3"><b>Lorem ipsum dolor</b></h5>
<span class="money text-secondary">
<b>$35.00</b>
</span>
<p class="text-secondary" >Meat / Potatoes / Rice / Tomatoe</p>
</div>
</div>
<div class="order row mt-5">
<div class="Menulistimage col-3 col-lg-2">
<img src="29.jpg" alt="gallery image">
</div>
<div class="position-relative Menulistheading col-9 col-lg-9 p-1">
<h5 class=" d-inline-block mt-3"><b>Lorem ipsum dolor</b></h5>
<span class="money text-secondary">
<b>$35.00</b>
</span>
<p class="text-secondary">Meat / Potatoes / Rice / Tomatoe</p>
</div>
</div>
<div class="order row mt-5">
<div class="Menulistimage col-3 col-lg-2">
<img src="30.jpg" alt="gallery image">
</div>
<div class="position-relative Menulistheading col-9 col-lg-9 p-1">
<h5 class=" d-inline-block mt-3"><b>Lorem ipsum dolor</b></h5>
<span class="money text-secondary">
<b>$35.00</b>
</span>
<p class="text-secondary">Meat / Potatoes / Rice / Tomatoe</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="multi_color_main">
<button type="button" data-toggle="collapse" data-target="#style-switch" id="switch_button" class="multi_color_icon btn btn-primary collapsed" aria-expanded="false" style="background-color: var(--test)"><i class="fa fa-cog fa-2x"></i></button>
<div class="multi_color_sec collapse" id="style-switch">
<h5>Select theme color</h5>
<form class="mb-3">
<input type="text" value="default" class="form-control multicolor" />
<input type="text" value="red" class="form-control red multicolor" />
<input type="text" value="grey" class="form-control grey multicolor" />
<input type="text" value="orange" class="form-control orange multicolor" />
</form>
</div>
</div>
</body>
Step-3: Add CSS code in <style>…</style> tag on index.html.
I have declared the “:root” variable in CSS.
:root variable is very helpful in CSS.
You can put the same color in your theme using the “:root” variable.
You pass any one color in the “: root” variable. Then pass that variable where you want to use that color.
:root {
--test: #ffc107;
}
.menu{
color:var(--test) !important;
}
.menu.active{
background-color:var(--test) ;
font-color:white;
color:white !important;
}
.menu.active:hover{
color:white !important;
}
.money{
position:absolute;
top: 10;
right:50;
font-size:20;
}
.Menulistimage {
border-radius: 50%;
height: 84px;
width: 84px;
padding: 5px;
border: 2px solid #fc0;
overflow: hidden;
}
.Menulistimage img {
border-radius: 50%;
width: 100%;
height: 100%;
}
.title{
position: relative;
padding: 15px;
display: inline-block;
}
.title::after {
background-color:var(--test);
border-radius: 10px;
content: "";
height: 1px;
left: 20;
position: absolute;
right: 0;
bottom: 0px;
width:75%;
}
.title::before {
background-color:var(--test) ;
border-radius: 10px;
content: "";
height: 1px;
left: 20;
position: absolute;
right: 0;
bottom: 3px;
width: 65%;
}
.menu:after{
border: radius;
bottom: 3px;
content: "";
left:20px;
position: absolute;
right: 3px;
top: 3px;
z-index:10;
transform:scale(0);
transition: 0.5s
}
.menu.active {
background-color:var(--test) !important;
}
.multi_color_sec form input.red:not([type="submit"]) {
background-color: #f42f2c;
}
.multi_color_sec form input.grey:not([type="submit"]) {
background-color: #bda881;
}
.multi_color_sec form input.orange:not([type="submit"]) {
background-color: #ff751a;
}
.multi_color_main {
left: 0;
position: fixed;
top: 40%;
z-index: 1;
}
.multi_color_sec form input:not([type="submit"]) {
background-color: #fc0;
border: 0 none;
cursor: pointer;
display: inline-block;
font-size: 0;
margin-right: 10px;
width: 40px;
height: 40px;
}
.multi_color_sec {
border-radius: 5px;
padding: 15px;
background-color: white;
box-shadow: 0 0 10px #999;
position: relative;
margin-top: 10px;
}
.multi_color_sec::before {
border-bottom: 10px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
content: "";
height: 0;
left: 10px;
position: absolute;
top: -10px;
width: 0;
}
Step-4: Add jQuery code in <script>…</script> tag on index.html.
In this code, I have changed the background color of the root variable on click.
$(document).on('click',".multicolor",function(){
var bgcolor = $(this).css("background-color");
$(":root").css("--test",bgcolor);
});
Review the below video.
I hope you guys found something useful ??
