jQuery color scheme changer

Question

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

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

Answer 1

Following " http://magna-themes.com/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);
});

Answer 2

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.

Answer 3

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!

Answer 4

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

---

If, however, you wanted to use a completely 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.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 5

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.net/webdesign/create_a_better_jquery_stylesheet_switcher.html

good luck

Answer 6

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.com/themeroller/ )

Easiest solution here is to implement a themeswitcher like the one here: https://github.com/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...

Answer 7

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.com/article/alternate

Answer 8

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

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/

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.

Answer 9

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

Repository: ColorPanel .
Demo & Documentation: Demo .