jQuery Color Scheme Changer - Kvcodes
X

Congrats, You are Subscribed to Receive Updates.

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.

jQuery-Color-Scheme-Changer

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

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, OpenCart Theme Development, PHP, HTML, CSS, jQuery, Bootstrap development and content SEO.

Comment Below

Your email address will not be published. Required fields are marked *

*

Current ye@r *

Menu

Sidebar

Subscribe E-mail Updates

Congrats, You are Subscribed to Receive Updates.

Advertisement

Category Posts