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

Tuesday, 26 January 2010 16:05

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?