javascript - jQuery 配色方案转换器

Question

我看到很多网站都包含一个颜色切换器，用户可以通过它选择/挑选任何颜色，整个页面都会相应地改变。下面是一些示例链接....

   http://csmthemes.com/themes/beta/static/
   http://magna-themes.com/demos/html/flatapp/index.htm
   http://envato.nestolab.com/Batekh/style-1/image-slider-version/index-one-page.html
   http://ronseta.com/Roof/index_02.html

我想要的:我想要相同的配色方案，但问题是我是自己创建它的专家，所以我想要基本逻辑和一些代码开始，我具备 JavaScript 和 jQuery 的基本知识。如果有任何与此相关的免费插件，请分享链接，或分享一些代码，我可以通过这些代码开始构建自己的..

Answer 1

关注“http://magna-themes.com/demos/html/flatapp/index.htm”

0.按颜色创建多个css文件

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

1.你创建一个 id 像 color-switcher 的 css 链接

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

2.创建颜色选择器菜单

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

3.你使用javascript改变你的链接路径

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