Hello Friends,

I have been trying to make a simplified colorswitcher with jQuery, for my site. I have managed to swicth the colors of links and background. Here is the fiddle : Fiddle

Here is the code i have used :

HTML

<ul class="colchange">

<li class='red'><a href='#' class='click' data-color='#e74c3c'></a></li>

<li class='green'><a href='#' class='click' data-color='#2ecc71'></a></li>

<li class='blue'><a href='#' class='click' data-color='#3498db'></a></li>

<li class='yellow'><a href='#' class='click' data-color='#f1c40f'></a></li>

<li class='black'><a href='#' class='click' data-color='#222'></a></li>

<li class="links"><a href="#">Changer</a></li>

</ul>

</div>

<div class="bar2">this is Bar 2</div>

<div class="bar3"></div> 

CSS

.bigbar{ background: #FFF;height:50px;line-height:50px;padding:0px 20px;

}

.bar2, .bar3 { background: #FFF;height:50px;line-height:50px;padding:0px 20px;box-shadow: 0px 0px 8px #111;margin-top:30px;}

.colormenu{ width:auto; height:40px;line-height:40px;background:#FFF;padding: 10px; }

.colormenu ul { margin: 0; padding:0; }

.colormenu ul li { list-style:none;margin:0;display:inline-block;}

.colormenu ul li a { padding: 10px 20px;display:inline;box-shadow: 0px -1px 2px rgba(0,0,0,0.2);}

.red { background: #e74c3c; }

.green { background: #2ecc71; }

.blue { background: #3498db; }

.yellow { background: #f1c40f; }

.black { background: #222; }

.links {float:right;}

.linkcolor { color: #999; } 

jQuery

jQuery(document).ready(function($){ 

$('.click').on('click', function(e) {

$('body, .bar3').css('background', $(this).data('color')); 

$('a:link, .bar2').css('color', $(this).data('color')); 

});

}); 

Now i want to  add cookie function so the browser could remember the preference.

My knowledge is limited as per cookie function so i request you guys would help me.

Thanks in advance

regards