Creating Themes with CSS and JavaScript
Pages: 1, 2

After you create a default stylesheet, just copy it and use it as a template for additional style sheets, or themes. Store all style sheet files in a single common folder. To import a style sheet into an HTML document after creation, you write:

<link rel="stylesheet" type="text/css" href="Path to your style sheet file">

3. Implementation in JavaScript

Now that we have the static parts, it's JavaScript's task to make this dynamic. What needs to be done?

We need a solution to dynamically import a style sheet. This can't be done in JavaScript only, so we need an old friend's help, document.writeln(). The trick is simply to write into your document while it's being loaded, a browser will parse this like any other content and load the defined style sheet file, which is applied to the document:

document.writeln('<link href="'+THEMES_FOLDER_PATH+s+'.css" type="text/css" rel="stylesheet">');

To make this reusable, you have to consider two points. First, of course, you have to wrap it in a function (see insertStyleSheet()).

It's very important to use absolute paths -- paths that are evaluated starting from your document root folder. This is necessary because you'll have to adjust the path every time you insert the script into a new document which has a different relative location to your style sheet files -- which isn't really a reusable script solution. When you look at the code line above, you'll also find the variable s, which holds the name of the theme, the file suffix .css is added statically. Actually, s should hold one of your theme's name that you stored in the common folder (whose name is specified in THEMES_FOLDER_PATH).

Next we need a method to let users choose between different styles, so we create a reusable function called setTheme(), which receives the name of a theme as an argument. This is how to call it:

<a href="javascript:setTheme('default')">Default Theme</a>

To store a theme's name after setting it, we use cookies, which allow us to store data across sessions. This is needed because HTTP, the underlying web protocol, is a stateless protocol -- it doesn't know about you the next time you request a resource from a server. From the JavaScript programmer's perspective, a cookie is a semicolon delimited string of key/value pairs. Since we're lazy and don't want to reinvent the wheel, we'll use an existing cookie library that I took from O'Reilly's "JavaScript Application Cookbook" by Jerry Bradenbaugh. This small library contains the basic methods needed to work with cookies.

Inside setTheme(), we store the name of the theme with a specified key in our cookies with SetCookie() after deleting an old value with DeleteCookie(). To apply the new style sheet, the last step is to reload the current document which is easily done by resetting the current location. Since it comes, in most cases, from your memory cache, we're not generating network noise.

While the document is reloaded insertStyleSheet() gets called again. Using GetCookie(), we're trying to access the name of a theme, if specified. If none is found, the script uses a default style and writes the <link> element into the document, see above.

4. Step: Add the script and correct settings

The last step is to include the JavaScript library into your documents. What we didn't consider so far is what happens to clients with JavaScript disabled. To avoid breaking your documents, you also need a <NOSCRIPT> element, which is only handled by clients that have disabled JavaScript:

<script src="/themes.js"></script>
<noscript><link href="/styles/default.css" type="text/css" rel="stylesheet"></noscript>

After you create the snippet with the correct (absolute) paths, you can just cut and paste it anywhere in your site's documents.

You must take care that you always point to the same default style sheet (in case you're not supplying a style sheet for users without JavaScript). This must be specified as a constant variable, DEFAULT_THEME, in the script. The last step is to adjust the path to your themes folder in THEMES_FOLDER_PATH (be sure to end your path with a slash) and you're done.

You can find the complete source code and a set of example files in our JavaScript library.

Conclusion

As we saw, implementing your own themes is easy as long as you understand the underlying principles and technologies. Also, keep in mind, that CSS support is not as consistent as it should be. For sites with a large audience, you should stick to the old dirty way. While we didn't discuss all the complexities in this article, hopefully, you've become curious for more -- and that's really all I wanted. Stay tuned!

Claus Augusti is O'Reilly Network's JavaScript editor.

Read more Essential JavaScript columns.

Return to the JavaScript and CSS DevCenter.