jQuery Color Scheme Changer

Introduction

jQuery Color Scheme Changer is a small piece of code helps you to change the color schemes on click. This is so simple to apply it on real-time HTML sites.
1. Create multiple css files by color

style/colors/default.css
style/colors/green.css
style/colors/red.css
style/colors/pink.css

2.A link to css with an id like color-switcher  and it will help us to apply color scheme stylesheet changes.

<link rel="stylesheet" type="text/css" href="style/colors/default.css" id="color-switcher">

3. Create a menu of color picker to select your color scheme.

<div id="demo-wrapper">
 <h2>COLORS:</h2>
 <ul>
 <li class="green" data-path="style/colors/green.css"></li>
 <li class="red" data-path="style/colors/red.css"></li>
 <li class="pink" data-path="style/colors/pink.css"></li>
 </ul>
 <div class="clear"></div>
<p data-path="style/colors/default.css">Restore Default Scheme</p>
</div>

4. You can change the path of your link using jQuery And it will change the stylesheet and loads the styles directly on link selection.

$('#demo-wrapper ul li').on('click', function(){
 var path = $(this).data('path');
 $('#color-switcher').attr('href', path);
});

That’s it. You have done it to change the color schemes, And also dont forget to add color codes to the corresponding style-sheets. I hope it will help you to get custom color scheme for your HTML Website with it. If you like this article, Please subscribe for my newsletters and also if you are interested to follow me on social sites please select from the below one.