javascript - jQuery color scheme changer - Stack Overflow

admin管理员组

文章数量:1287517

I have seen a lot of websites that contain a color switcher through which a user can select/pick any color, and the whole page will change accordingly. Below are a few example links....

   /
   .htm
   .html
   .html

What I want: I want the same color scheme, but the problem is that I am that expert to create it on my own, so I want the basic logic and some code to start, I have a basic knowledge of JavaScript and jQuery. If there are any free plugins related to that then please share the link, or share some code through which I can start building my own..

I have seen a lot of websites that contain a color switcher through which a user can select/pick any color, and the whole page will change accordingly. Below are a few example links....

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

What I want: I want the same color scheme, but the problem is that I am that expert to create it on my own, so I want the basic logic and some code to start, I have a basic knowledge of JavaScript and jQuery. If there are any free plugins related to that then please share the link, or share some code through which I can start building my own..

• javascript
• jquery
• css
• plugins

Share Improve this question Follow edited Mar 23, 2015 at 2:47 AstroCB 12.4k2020 gold badges5959 silver badges7474 bronze badges asked Mar 13, 2015 at 16:43 user4259777user4259777 5

• You should learn the basics before submitting on Stack Overflow. We debug your source code and find the reason(s) for it not functioning as intended. With no source code we have nothing to work with. I'm sure you can find many tutorials if you use google. I would also remend reading this since you have What I want in bold text stackoverflow./help/how-to-ask Happy coding! – NewToJS Commented Mar 13, 2015 at 16:50
• i am not asking for ments, so better stick with the question and please read the question again before menting, i clearly mention that i need a code snipt to start.... – user4259777 Commented Mar 13, 2015 at 16:52
• 2NewToJs agree, @webydesigny if you want to start with logic and code start you should find any tutorial e.g. wpexplorer./create-wordpress-theme-html-1 or look any source code – daremachine Commented Mar 13, 2015 at 16:54
• I did read your question, now read this: we debug your source code. We don't create it for you. You won't learn from copy/paste. – NewToJS Commented Mar 13, 2015 at 16:54
• 1 so can you please tell me the concept of creating color scheme like that? – user4259777 Commented Mar 13, 2015 at 16:57

Add a ment  | 

9 Answers 9

Sorted by: Reset to default 8 +50

Following "http://magna-themes./demos/html/flatapp/index.htm"

0.create multiple css files by color

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

1.you create a link to css with an id like color-switcher

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

2.you create a menu of color picker

<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 change the path of your link using javascript

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

The basic theory goes like this! You create a theme with buttons, forms, controls etc.. Styling of the elements are usual. If I developed a theme where the user can select a color scheme, I would add a special class to every element which I want the user to modify. for an example :

I've the following html element.

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

I've got the following style

.yourStyle{
    ** Style **
}

I'll use the following sample jQuery code to change the color scheme.

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

Above is a basic code to start your development.

Try changing the stylesheet dynamically using jQuery (preferred) or Javascript. Each stylesheet has styles defines a particular theme. To make your code look a little professional, try using data-* HTML 5 attributes to change stylesheet.

Below is an example:

Html:

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

And js:

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

Hope this helps. Let me know if you need any further clarifications. Thanks!

this answer is a demonstration of how 'you can change the background color from user input'

---

If, however, you wanted to use a pletely different 'theme', I would suggest creating different css files, and modifying the style link in your head section (via jquery/javascript) to point to each 'theme'.

---

This jquery would do the basics for you, changing the background color on three inputs.

$(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./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>

On your HTML you can add a list with class-name and path to your different css files...

You change your css files dynamically with jquery...

If you want only to change colours check this site out: http://www.marcofolio/webdesign/create_a_better_jquery_stylesheet_switcher.html

good luck

I don't know why this hasn't been mentioned, but jqueryui has a themeroller, with several pre-made themes, and you can make your own. (http://jqueryui./themeroller/)

Easiest solution here is to implement a themeswitcher like the one here: https://github./harborhoffer/Super-Theme-Switcher

Of course, you could write your own switcher as well, basically you're just switching the src of the jqueryui stylesheet...

You stated you already understand how to switch the style sheet. You could use cookies to make the switch persist between page loads.

This article goes over the concept (also check out the date on it :D)

http://alistapart./article/alternate

Here's a really simple solution I put together that I think does what I think you're trying to acplish.

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/edhebert/tbptwz67/

In this demo I'm using the Spectrum Color Picker. It's a free, really easy to use plugin available at https://bgrins.github.io/spectrum/

I'm using a really basic color picker, but Spectrum has all sort of customization options.

Hope this helps.

I just found a cool jQuery plugin from Github which allow you to switch color schemes of the website.

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./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',
    }
});

Repository: ColorPanel .
Demo & Documentation: Demo.

本文标签： javascriptjQuery color scheme changerStack Overflow