Stylesheet Switching Part 2

Having got my stylesheet switcher working, I decided to improve the script a little and try to make it easier to implement. The script now not only adds in the required buttons to switch the stylesheet, but also adds the actual stylesheet links into the header, except for the default style. This is defined as the first style in array of stylesheets that is used to setup the buttons. By ensuring the default style has to be added manually, I ensure that the site will be styled even if javascript does not work.

The script was also imrpoved so that the button for the selected stylesheet was disabled, so it couldn't be clicked again.

I then moved all the scripts into a single javascript file. Now the whole thing is very easy to initialise. You simply need to defined three variables: themeCss (an array of css files representing the themes), themeName (an array of names belong to themes), themeId (the id of the element within which the buttons should be created). For example:

var themeCss = ['default.css','high.css','plain.css','olden.css'];
var themeName = ['Default','High Contrast','Plain','Olden'];
var themeId = "themeSwitch";

The gist I wrote about the switcher on GitHub, has been update to include these latest changes. Probably it can be simplified and generalised even further.

Tagged: