Theme Setter


Click here to change the theme.

Please see the page shown by the "Click here to change the theme." link above. The theme changes are done by Javascript ThemeSwitcher.js. The requirements are that I wanted a way to allow you to change the theme and to save the selection but I did not want to require any kind of signing into this site to retain the selection. I did not want to use cookies so I chose to use the HTML5 Web Storage API to store the theme. (Also see Web Storage (Second Edition); a sample is at HTML5 localStorage (name/value item pairs) demo). The following describes how the script works.

Every page in my site executes the "Loaded" function when it is loaded. First it gets all the relevant stylesheet links and puts them in an array. Then it gets an item from localStorage called "Theme". If the item does not exist then it sets the theme to the default theme. The default theme is intended to be as if no CSS was used for the page. Then it calls "SetTheme" to set the theme for the page.

The ThemeSetter page (that is shown by the "Click here to change the theme." link above) calls the "InitializeThemes" function when it is loaded. Then it gets "Theme" from localStorage. Then it loads the "SelectTheme" box from the array of Stylesheets. When the selection of the "SelectTheme" box changes the selected theme is set. Note that the selection is not saved unless the "Apply" button is pushed.