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

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

on Jan 26th 2010 with 63 comments

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?

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
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

    Amazing! Thanks!

  • http://dattaproffs.se Fredrik

    I really like these quicktips. Not that the actual tip is useful ;) but there is always something small that you will find.

    Thanks

  • http://sffarlenn.net Laneth Sffarlenn

    This tip can be taken and used in a myriad of other applications – it doesn’t have to be limited to what it currently is. Imagination is key here; learn the lesson and adapt it to your needs.

    I love these tips Jeffrey, thanks once again!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Exactly. Thanks! :)

  • Vadim

    It can be very useful and can generate new ideas of designing sites.

  • http://www.seowisedesigns.com Yheng

    Wow nice quick tips there Jeffrey! I never thought this could be done in 200 sec. now it does.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      I didn’t either…had to be quick!

  • http://ds.laroouse.com piyanistll

    very nice post thanks for tutorial jeffrey

  • http://andrewburgess.posterous.com Andrew Burgess

    Neat tip!

    And yes, keep up the quick tips; it’s a great idea!

  • http://wptricks.net WP Tricks

    I need to tried this trick. jQuery is my favorite tools so far ;)

  • http://www.thetutorialblog.com Wez Pyke

    I love these quick tips, always something useful in there.

  • http://lickynee.com lickynee

    These quick tips are my favorite kind of posts on Nettuts Jeffrey! Keep it up :D

  • http://www.airwolfe.com Alex Wolfe

    Nice 1, quick tips are great.

  • http://tutorialblog.info/ tutorial blog

    good tutorial. thank for share

  • http://www.windowsspiffy.com Joel Cummings

    I have been wondering how this was done for quite some time now, this is great too because i’m trying to learn more JQuery.

    Great Tip Jeffery

  • http://twitter.com/netjunky88 Eugene

    Jeffrey, such tips are just great. Keep em coming…:D

  • http://brianswebdesign.com Brian Temecula

    Now if you could just set/check a cookie so that you could maintain state in regards to the color choice, I think it would add a lot of substance to the tutorial. Good job for 200 seconds. I’d be happy if I could do it in 400!

    • http://www.vagrantradio.com Jason

      Just use the jquery.cookie plugin. Easy.

    • http://www.vagrantradio.com Jason

      I put together a quick and dirty demo using the jQuery Cookies plugin if anyone is interested.

      http://www.vagrantradio.com/demos/theme_switcher/

  • http://www.foxyturkey.com Yigit Ozdamar

    Amazing and quick one! Thank you Jeffrey!

  • Micko

    Nice tip.
    What happened to js from null ch4, I’m sure you said you’re gonna release it last week.

  • begs

    Very nice job!

    But i wonder about:
    for ( var i = 0, len = colorOptions.length; i < len; i++ ) {

    why do you use "len = colorOptions.length" it's not used lter in the code, so why not easily and short:

    for ( var i = 0; i < colorOptions.length; i++ ) {

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      It’s not a huge deal in this case. But we cache the length in a variable to prevent the JavaScript from having to determine the length of our array every iteration. This is a best practice.

      • Micko

        So it’s faster…

      • http://www.freshclickmedia.com Shane

        Yeah, this is a best practice when using for loops in any language. You can do the assignment to the length variable (I’d say assignment, rather than cache in this case) at the top of the loop as Jeffrey has written it, or just before the for loop as a single statement.

        var len = colorOptions.length;

  • Rolfje

    Thanks! This is awsone, was looking for sonething like this.

  • leo rapirap

    I find it kinda funny when Jeffrey says “i just don’t have much time at all” but still manages to produce a very clear/concise and informative screencast.

    thanks for the time Jeffrey!

    • http://www.peerfly.com/luke LukePeerFly

      haha. I agree. Amazing job.

  • http://drimr.com Hoàng Ngọc Tân

    it’ll be better if you using with jquery cookie plugin to store theme setting

  • http://rcanblog.com Aashish

    GR8 jeff,

    If you don’t mind which screencast software you are using???, I also want to create one for nettuts

    • http://www.freshclickmedia.com Shane

      Head over to http://screenr.com/, it’s a web browser embedded Java app that records your screen. Really, really simple to use, and effective too, as this screencast shows :)

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      @AAshish – The best part is that it’s really as simple as “click and record.” The only limitation is that it must be 5 minutes or less.

  • http://alexhogberg.se Alexander

    Great speed in the tutorial Jeff. I think I will implement this as a font size-changer on one of my sites!

    I was just wondering how you could reference and change a stylesheet in the javascript?

  • DeannRie

    Спасибо!!!

  • http://www.gold-price-today.com اسعار الذهب

    thanks
    iam using pure javascript to i can do that
    but with jquery
    of course this will be butifull

  • http://www.maiconweb.com Maicon Sobczak

    Great effect!

  • http://www.jordanwalker.net/index.php Jordan Walker

    Great tool to add that much more user interaction.

  • http://spotdex.com Davidmoreen

    That is awesome, a really unique feature implmented in 3 minutes!

  • Cedric

    This isn’t what I consider a theme switcher. It’s a basic color switcher for single elements. A theme switcher should switch a whole style and not only a few colors on a page. Anyway nice tutorial, thanks!

  • Bobbi

    This is very similar to code I have been working (read: failing) on, but I want the div background color to change when refreshed or loaded. All the examples I keep finding have it based on clicking or hovering.

    Can anyone help?

    • http://www.vagrantradio.com Jason

      Bobbi,

      I’m sure instead of setting the color value in a click or hover function, setting it in a $(window).load(function() should work.

      • Bobbi

        Thanks! I will give it a try. :o)

  • Julius

    This is barely easy!

  • http://www.corymathews.com Cory Mathews

    This is not a theme switcher. This is just a color switcher. A Theme switcher would be changing the css file that is the primary.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      And I mentioned how to do that in the screencast. I had 200 seconds, Cory…

  • http://www.seosheffield.org Ed Baxter

    Great little quick technique, thanks for sharing Jeff!

  • Cony Shown

    so you created an article to just show $(‘h2′).css(‘color’, $(this).css(‘backgroundColor’)); one line of code?

    i was expecting something serous ..

    • http://blog.jackbliss.co.uk Jackbliss

      Hey man, don’t knock it. If this is a little simplistic for you, it’s just aimed at someone newer to the language/library.

  • Evan-XG

    nice stuff , and well done .
    there is something nice to easly add though, by storring the theme in cookie as a setting for the visitor .

  • http://sonergonul.com Soner Gönül

    Woooow !

    So cool !

    Thanks !

  • Stan

    Can you use this also with background-images?

  • http://bloggerzbible.blogspot.com/ Bloggerzbible

    thanks was in need

  • v-mann

    hmmm great Tut, but the Demo doesn’t Work in IE8 for me :-/
    FF und Crome do it just fine… grrr…

  • http://blog.jackbliss.co.uk Jack

    Quicktips, I think this is the start of a beautiful friendship.

  • http://www.simonbouchard.com Simon

    Thank you for this great idea Jeffrey! Will use it on my items :)

  • http://tweeaks.com Jared

    One of the best tuts. Love it, thanks.

  • http://www.bmwclubarad.ro Maxi

    can make the images mean to be an image in many colors. eg a car

  • kate

    thanks again!

  • DaveC

    Thanks Jeffrey. I didn’t know you could do $(el).append( [el1, el2] )

    Unfortunately it doesn’t work on IE8 for me either.

    I might be looking into this waaay too deeply, but I keep hearing about accessibility stuff and everything being usable via the keyboard. Would there be an easy way to achieve this here?

    Would it be more efficient (and perhaps readable) to assign the event handler to the divs in #colorContainer in a seperate block? I.e.:

    //other code as before

    $(‘#header’).hover(function() {
    colorsContainer.fadeIn(200);
    }, function() {
    colorsContainer.fadeOut(200);
    });

    colorsContainer
    .children(‘div’)
    .hover(function() {
    $(‘h2′).css(‘color’, $(this).css(‘backgroundColor’));
    });

    Just realised this makes it work in IE8 too!

  • Vincent

    Thanks for the great tut. I have a question though.

    For colorOptions, what’s wrong with doing it the regular javascript array way?

    eg:

    var colorOptions = ['black','blue','orange','red','green'];

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Nothing at all. :) Just laziness on my part. They render the same thing.

  • http://r6media.com r6media

    Thanks for this fantastic tutorial!

  • Farzad

    Hi and thanks for this useful tutorial, but there is a problem with this!

    Basically when you select a colour that’s fine, even when hovering over the colours the page text colours changes instantly, but when you attempt to refresh the page the colour goes back to its default colour “black” and that’s what I’m having problem with!

    I think the colours should be stored in somewhere, so when refreshing the page or even jumping from one to another page the select colour would stay the same!

    So could somebody help with this please!
    Thanks in advance :)