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

Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

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 = $('<div />').css('background', colorOptions[i])[0];


$('#header').hover(function() {
		.hover(function() {
			$('h2').css('color', $(this).css('backgroundColor'));
}, function() {


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?