How to add a CSS which we can change. like if we change in one place, the color of the whole website should get changed.
Screenshot : screenshot for Sample
Sample website : https://themezhub.net/rikada-demo-05/rikada/index.html#
as you can see in above website, they have a slider in left side and which contain a list of color, if you choose any color the whole website color will change.
How to make like this?.
Example :
I define the color code in one place of CSS or website and then the whole website should get changed according to it.
You have to add the class with the body tag on click left side colors. Then add CSS of color for each element that you'd like to update.
"I define the color code in one place of CSS or website and then the whole website should get changed according to it."
Above, is the best thought for such dynamic color for webpages.
Example code : -
function change(color){
$("body").removeClass();
$("body").addClass(color);
}body.black {
background-color : black;
color: white;
}
body.black .heading_1{
font-size: 30px;
font-weight : bold;
}
body.red {
background-color : red;
color: white;
}
body.red .heading_2{
font-size: 30px;
font-weight : bold;
}
body.green {
background-color : green;
color: white;
}
body.green .heading_3{
font-size: 30px;
font-weight : bold;
}
body.blue {
background-color : blue;
color: white;
}
body.blue .heading_4{
font-size: 30px;
font-weight : bold;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body class="black">
<span class="heading_1"> This is Black </span><br/>
<span class="heading_2"> This is Red </span><br/>
<span class="heading_3"> This is Green </span><br/>
<span class="heading_4"> This is Blue </span><br/>
<br/>
<button onclick="change('black')"> Black </button>
<button onclick="change('red')"> Red </button>
<button onclick="change('green')"> Green </button>
<button onclick="change('blue')"> Blue </button>
</body>
</html>You can define any style to any of your element on page (I have it on heading in my case), also you can define any class for any of the element (body.<class> in my case) on page with respect to which you are going to change the style for other elements.