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