jQuery 配色方案转换器

Question

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

   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的基本知识。如果有任何与此相关的免费插件，请分享 link，或分享一些代码，我可以通过这些代码开始构建自己的..

Answer 1

基本理论是这样的！您创建一个带有按钮、表单、控件等的主题。元素的样式很常见。如果我开发了一个用户可以 select 配色方案的主题，我会为我希望用户修改的每个元素添加一个特殊的 class。例如：

我有以下 html 元素。

<input type='button' value='submit' class='yourStyle specialClass'>

我有以下款式

.yourStyle{
    ** Style **
}

我将使用以下示例 jQuery 代码来更改配色方案。

$('document').ready(function(){
   $('colorSchemeChoser').click(function(){
       $('.specialClass').css('background-color','sampleColor');
   })
})

以上是开始开发的基本代码。

Answer 2

尝试使用 jQuery（首选）或 Javascript 动态更改样式表。每个样式表都有定义特定主题的样式。为了使您的代码看起来专业一点，请尝试使用 data-* HTML 5 个属性来更改样式表。

下面是一个例子：

Html:

<button id="grayscale" data-theme="style.css">Original</button>
<button id="grayscale-2" data-theme="style2.css">Custom</button>

和 js:

$("button[data-theme]").click(function() {
    $("head link[rel=stylesheet]").attr("href", $(this).data("theme"));
}

希望这对您有所帮助。如果您需要任何进一步的说明，请告诉我。谢谢！

Answer 3

这个答案展示了如何 'you can change the background color from user input'

但是，如果您想使用完全不同的 'theme'，我建议您创建不同的 css 文件，并修改头部部分中的样式 link（通过 jquery/javascript) 指向每个 'theme'。

此 jquery 将为您完成 基础知识 ，更改三个输入的背景颜色。

$(document).ready(function(){
  $('#changeColor').click(function(){
    var red= $('#red').val();
    var green = $('#green').val();
    var blue = $('#blue').val();
    var op = $('#opacity').val();
    $('html').css("background","rgba("+red + ","+green+","+blue+","+op+")");
    });
  });

input[type="number"] {
  width: 100px;
  height: 50px;
}
#red{
  background:red;
  }

#green{
  background:green;
  }

#blue{
  background:blue;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" step="1" id="red"  value="255"/>
<input type="number" step="1" id="green"  value="255" />
<input type="number" step="1" id="blue" value="255"/>
<input type="number" step="0.1" id="opacity" value="1" />
<button id="changeColor">GO</button>

Answer 4

在您的 HTML 上，您可以添加一个列表，其中包含 class-名称和不同 css 文件的路径...

您使用 jquery...

动态更改 css 文件

如果您只想更改颜色，请查看此站点： http://www.marcofolio.net/webdesign/create_a_better_jquery_stylesheet_switcher.html

祝你好运

Answer 5

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

0.create 多个 css 个颜色文件

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

1.you 创建一个 link 到 css，id 像 color-switcher

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

2.you 创建颜色选择器菜单

<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.you 使用 javascript

更改 link 的路径

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

Answer 6

我不知道为什么没有提到这个，但是 jqueryui 有一个 themeroller，有几个预制的主题，你可以自己制作。 (http://jqueryui.com/themeroller/)

这里最简单的解决方案是像这里一样实现一个主题切换器：https://github.com/harborhoffer/Super-Theme-Switcher

当然，您也可以编写自己的切换器，基本上您只是切换 jqueryui 样式表的 src...

Answer 7

您说您已经了解如何切换样式sheet。您可以使用 cookie 在页面加载之间保持切换。

本文介绍了这个概念（也请查看上面的日期 :D）

http://alistapart.com/article/alternate

Answer 8

这是我整理的一个非常简单的解决方案，我认为它可以实现我认为您想要完成的目标。

HTML

<h1>Color Picker</h1>
<input type='text' class="colorPicker"/>

JS

$(".colorPicker").spectrum({
    color: "#ff0000",
    change: function(color) {
        // convert the color output to a usable hex format
        color = color.toHexString();
        // set the css of your target element to the chosen color
        $("body").css({"background-color":color});
    }
});

http://jsfiddle.net/edhebert/tbptwz67/

在这个演示中，我使用了 Spectrum Color Picker。这是一个免费且非常易于使用的插件，可在 https://bgrins.github.io/spectrum/

获得

我使用的是一个非常基本的颜色选择器，但 Spectrum 有各种自定义选项。

希望对您有所帮助。

Answer 9

我刚刚从 Github 中找到了一个很棒的 jQuery plugin，它允许您切换网站的配色方案。

HTML:

<head>
<link href="dist/jquery.colorpanel.css" rel="stylesheet">
<link href="skins/default.css" id="cpswitch" rel="stylesheet">
</head>
<body>
<div id="colorPanel" class="colorPanel">
    <a id="cpToggle" href="#"></a>
    <ul></ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="dist/jquery.colorpanel.js"></script>
</body>

JavaScript:

$('#colorPanel').ColorPanel({
    styleSheet: '#cpswitch',
    animateContainer: '#wrapper',
    colors: {
        '#4B77BE': 'skins/default.css',
        '#16a085': 'skins/seagreen.css',
    }
});

存储库：ColorPanel .
演示和文档：Demo.

jQuery 配色方案转换器

jQuery color scheme changer

javascript

css

jquery

plugins