Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript

Web Topics
All Articles
Scripting Languages

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab

O'Reilly Network Script Library -- Javascript

Creating Themes With JavaScript and CSS

Language: JavaScript

Download the files for this script (zip format)

A clean separation of structure and presentation allows you to give your pages a user selectable look by applying different style sheets to the same pages. For first-time visitors this script selects a default style sheet, after selecting a favorite theme its name is stored in the cookies database.


In the Zip file you'll find the JavaScript funtion and an example page which lets you choose between two different themes. For using the function you only have to import it into your documents and make sure a default style sheet is used for users with JavaScript disabled:

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

Before you can actually use it you probably have to adjust three global variables inside the script:

  • THEMES_FOLDER_PATH, contains an absolute path to your style sheets folder
  • DEFAULT_THEME, contains the name of the default theme and must correspond to the name you used above as default.

For complete instructions and a discussion of the technical backgrounds please refer to the complete Essential JavaScript article.