How To Change Theme Color Dynamically With Root Variable Using Jquery

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  ??

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories