Quick Tip: How to Create a Theme-Switcher in 200 Seconds

Quick Tip: How to Create a Theme-Switcher in 200 Seconds

Have you ever seen sites that offer some kind of “color-switcher” within the header section? Want to know how easy it is to replicate? I’ll show you in 200 seconds, using jQuery.


The Screencast

Granted, this is a very simple example. What more do you expect in 200 seconds! :) But, this can easily be extended to import new stylesheets, if you wish.

The Final jQuery

var colorOptions = 'black, blue, orange, red, green'.split(', '),
	colorDivs = [],
	colorsContainer = $('#colorsContainer');

for ( var i = 0, len = colorOptions.length; i < len; i++ ) {
	var div = $('
').css('background', colorOptions[i])[0]; colorDivs.push(div); } colorsContainer.append(colorDivs); $('#header').hover(function() { colorsContainer .fadeIn(200) .children('div') .hover(function() { $('h2').css('color', $(this).css('backgroundColor')); }); }, function() { colorsContainer.fadeOut(200); });

Conclusion

I had to zoom through this screencast, so feel free to discuss/ask questions in the comments! I hope you enjoyed it! Are you liking the “two-a-week” quick tips that all of the Tuts sites are now doing?




Leave a Reply

Your email address will not be published. Required fields are marked *