How to create a better jQuery CSS stylesheet switcher

Placed in: Home

Create a better jQuery stylesheet switcher

Style Sheet switchers (or "colour theme choosers") are not really that new. Apart from that fact, they still are pretty fun to use and cool to see. I was wondering how jQuery could help me achieve this technique. While searching, I came across several solutions.

There is a problem when using these techniques, which I will explain later. I created a little work-around to create a better jQuery stylesheet switcher. We'll simply change some colours for the user!

Make sure to check out the demo to view what we're trying to accomplish.

The cute little monsters used in the demo are created by Fast Icon (Dirceu Veiga). Now, let's take a look at how you can create something like this yourself!

Normal way

First, I'll show how jQuery users normally would change their CSS file.

HTML

This is the trimmed down version of the HTML file. As you can see, there is one style.css placed in the head and there are three links to color changers.

 
<html>
<head>
   <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="colorchanger">
   <a class="colorbox colorblue" href="?theme=blue" title="Blue Theme"></a>
   <a class="colorbox colorgreen" href="?theme=green" title="Green Theme"></a>
   <a class="colorbox colororange" href="?theme=orange" title="Orange Theme"></a>
</div>
</body>
</html>

Nothing really fancy going on here - just the markup that we need for the page.

CSS

Now straight to the important part of the CSS file: The colorchanger. We'll turn the links into block elements.

 
/* COLOR CHANGER */
#colorchanger { float:right; }
.colorbox { width:20px; height:20px; border:1px solid #050505; float:left; margin:5px; cursor:pointer; display:block; }
.colorblue { background-color:#bfe1f1; }
.colorblue:hover { background-color:#90bcd0; }
.colororange { background-color:#F69C3A; }
.colororange:hover { background-color:#FF5C01; }
.colorgreen { background-color:#78A848; }
.colorgreen:hover { background-color:#189048; }

As you can see, the boxes each have their own color and hover effect. We'll now use jQuery to actually change the stylesheet when the user clicks on one of these links.

jQuery

After loading jQuery, we can now use it's power to change the link-element in the HTML-head (the place where we defined the first CSS sheet: style.css).

 
google.load("jquery", "1.3.1");
google.setOnLoadCallback(function()
{
   // Color changer
   $(".colorblue").click(function(){
      $("link").attr("href", "blue.css");
      return false;
   });
   
   $(".colorgreen").click(function(){
      $("link").attr("href", "green.css");
      return false;
   });
   
   $(".colororange").click(function(){
      $("link").attr("href", "orange.css");
      return false;
   });
 
});

This works great! Every time the user clicks on one link, the stylesheet gets replaced. Now the only thing we have to do, is define how the CSS should look like when switching colours.

The problem

There are two problems when looking at this solution: One small one, and a bigger one. The small one, is that the whole style.css gets replaced with the new CSS file (for example: blue.css). Since this new CSS file needs to be downloaded and parsed by the browser, the user will see a little flickering; A split second of the "naked" HTML file (no CSS).

But there is a bigger problem when using this solution. The whole style.css gets replaced, which means that all your CSS definitions will get replaced too. Everything you already set for body, #wrapper, #sidebar (like fonts, floats and sizes) in style.css will be gone as well.

"But you can copy the whole style.css content to the other style sheet files and change the colours, right?" That's absolutely true. But, what will happen if one style sheet would change? You would have to change all other CSS files which will cause loads of work. Also, you're not really saving bandwith with almost duplicate CSS.

The solution

I found a solution for this problem. The key lies in the fact that there are two ways of adding CSS to an HTML page. The normal way, is by using link rel='stylesheet'. The other way is using the style element.

We're going to use this difference to our advantage. We'll create one base CSS file (style.css) where we're going to place all CSS definitions except for the colours. Each colour gets his own CSS file that we're going to switch using jQuery.

HTML

We'll change the HTML a little bit to make this technique work.

 
<html>
<head>
   <style type="text/css">@import url("style.css");</style>
   <link href="green.css" rel="stylesheet" type="text/css" />
</head>
<body>
   <!-- Body contents here -->
</body>
</html>

Now, when we use the color changer, only the green.css file gets replaced by the other CSS file. This is how they can look like:

style.css (sizes, fonts etc.)

 
h2 a { display: block; margin: 0 0 30px 0; font: italic 45px Georgia, Times, Serif;
        text-align: center; }
#wrapper { width:940px; margin:40px auto; background-repeat:no-repeat; }

green.css (colours only)

 
h2 a { color: #78A848; }
h2 a:hover { color: #189048; }
#wrapper { background-image:url("images/monster_green.png"); }

That's all! Now, when the user changes the CSS files, only the colours get changed. Also, you can easily change the style.css file without having to make the same change in all other CSS files.

Conclusion and Download

Now we also need to set a cookie to save any colour changes the user made, so the next time the proper CSS gets loaded right from the start. Other than this, I think this is a pretty nifty way of changing CSS files

What do you think? Would you do it any other way, or are you going to use it in your next project?