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.您创建一个指向css的链接，其ID为color-switcher

<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);
});

Answer 2

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

我有以下html元素。

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

我有以下风格

.yourStyle{
    ** Style **
}

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

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

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

Answer 3

尝试使用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 4

此答案演示了如何根据用户输入更改背景颜色＆＃39;

但是，如果您想使用完全不同的主题，我建议您创建不同的css文件，并修改头部中的样式链接（通过jquery / javascript）指向每个＆＃39;主题＆＃39 ;.

这个jquery会为你做 basics ，改变三个输入的背景颜色。

＆＃13;

$(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+")");
    });
  });

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

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

使用jquery动态更改css文件...

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

祝你好运

Answer 6

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

这里最简单的解决方案是实现类似于这里的主题交换：https://github.com/harborhoffer/Super-Theme-Switcher

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

Answer 7

您说您已经了解如何切换样式表。您可以使用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。
演示＆amp;文档：Demo。

jQuery配色方案转换器

9 个答案: