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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Amazing! Thanks!
I really like these quicktips. Not that the actual tip is useful ;) but there is always something small that you will find.
Thanks
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!
Exactly. Thanks! :)
It can be very useful and can generate new ideas of designing sites.
Wow nice quick tips there Jeffrey! I never thought this could be done in 200 sec. now it does.
I didn’t either…had to be quick!
very nice post thanks for tutorial jeffrey
Neat tip!
And yes, keep up the quick tips; it’s a great idea!
I need to tried this trick. jQuery is my favorite tools so far ;)
I love these quick tips, always something useful in there.
These quick tips are my favorite kind of posts on Nettuts Jeffrey! Keep it up :D
Nice 1, quick tips are great.
good tutorial. thank for share
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
Jeffrey, such tips are just great. Keep em coming…:D
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!
Just use the jquery.cookie plugin. Easy.
I put together a quick and dirty demo using the jQuery Cookies plugin if anyone is interested.
http://www.vagrantradio.com/demos/theme_switcher/
Amazing and quick one! Thank you Jeffrey!
Nice tip.
What happened to js from null ch4, I’m sure you said you’re gonna release it last week.
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++ ) {
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.
So it’s faster…
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;
Thanks! This is awsone, was looking for sonething like this.
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!
haha. I agree. Amazing job.
it’ll be better if you using with jquery cookie plugin to store theme setting
GR8 jeff,
If you don’t mind which screencast software you are using???, I also want to create one for nettuts
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 :)
@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.
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?
Спасибо!!!
thanks
iam using pure javascript to i can do that
but with jquery
of course this will be butifull
Great effect!
Great tool to add that much more user interaction.
That is awesome, a really unique feature implmented in 3 minutes!
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!
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?
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.
Thanks! I will give it a try. :o)
This is barely easy!
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.
And I mentioned how to do that in the screencast. I had 200 seconds, Cory…
Great little quick technique, thanks for sharing Jeff!
so you created an article to just show $(‘h2′).css(‘color’, $(this).css(‘backgroundColor’)); one line of code?
i was expecting something serous ..
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.
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 .
Woooow !
So cool !
Thanks !
Can you use this also with background-images?
thanks was in need
hmmm great Tut, but the Demo doesn’t Work in IE8 for me :-/
FF und Crome do it just fine… grrr…
Quicktips, I think this is the start of a beautiful friendship.
Thank you for this great idea Jeffrey! Will use it on my items :)
One of the best tuts. Love it, thanks.
can make the images mean to be an image in many colors. eg a car
thanks again!
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!
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'];
Nothing at all. :) Just laziness on my part. They render the same thing.
Thanks for this fantastic tutorial!
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 :)