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?
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
- http://360signals.com/ Maor Henry Hazan
- http://dattaproffs.se Fredrik
- http://sffarlenn.net Laneth Sffarlenn
- Vadim
- http://www.seowisedesigns.com Yheng
- http://ds.laroouse.com piyanistll
- http://andrewburgess.posterous.com Andrew Burgess
- http://wptricks.net WP Tricks
- http://www.thetutorialblog.com Wez Pyke
- http://lickynee.com lickynee
- http://www.airwolfe.com Alex Wolfe
- http://tutorialblog.info/ tutorial blog
- http://www.windowsspiffy.com Joel Cummings
- http://twitter.com/netjunky88 Eugene
- http://brianswebdesign.com Brian Temecula
- http://www.vagrantradio.com Jason
- http://www.vagrantradio.com Jason
- http://www.foxyturkey.com Yigit Ozdamar
- Micko
- begs
- Micko
- http://www.freshclickmedia.com Shane
- Rolfje
- leo rapirap
- http://www.peerfly.com/luke LukePeerFly
- http://drimr.com Hoàng Ngọc Tân
- http://rcanblog.com Aashish
- http://www.freshclickmedia.com Shane
- http://alexhogberg.se Alexander
- DeannRie
- http://www.gold-price-today.com اسعار الذهب
- http://www.maiconweb.com Maicon Sobczak
- http://www.jordanwalker.net/index.php Jordan Walker
- http://spotdex.com Davidmoreen
- Cedric
- Bobbi
- http://www.vagrantradio.com Jason
- Bobbi
- Julius
- http://www.corymathews.com Cory Mathews
- http://www.seosheffield.org Ed Baxter
- Cony Shown
- http://blog.jackbliss.co.uk Jackbliss
- Evan-XG
- http://sonergonul.com Soner Gönül
- Stan
- http://bloggerzbible.blogspot.com/ Bloggerzbible
- v-mann
- http://blog.jackbliss.co.uk Jack
- http://www.simonbouchard.com Simon
- http://tweeaks.com Jared
- http://www.bmwclubarad.ro Maxi
- kate
- DaveC
- Vincent
- http://r6media.com r6media
- Farzad


