Default Settings

This plugin allows the user to select one of a number of CSS themes to apply to the current site. The selection is immediately used and is also persisted in a cookie so that it applies to future visits. The standard themes come from the jQuery ThemeRoller tool and can be referenced at

You can set any global settings for the themes that are different from the defaults.

$.themes.setDefaults({cookieExpiry: 7});

Finally, the theme selection functionality can easily be added to a division with appropriate default settings. The resulting links allow the user to easily change the theme for this site. See the results in the sampler below.

You can also remove the themeing functionality if it is no longer required.

All themes:


$('#removeThemes').click(function() {
	var destroy = $(this).text() === 'Remove';
	$(this).text(destroy ? 'Re-attach' : 'Remove');
	$('#defaultThemes').themes(destroy ? 'destroy' : {});

Processed fields are marked with a class of hasThemes and are not re-processed if targetted a second time.


Control how the theme selection is presented.

Full view:

$('#fullThemes').themes({compact: false});

Appear on hover: Select a theme...

$('#hoverThemes').hover(function() { $('#selectThemes').toggle(); });

Click for a popup: Select a theme... Close

$('#popupTheme').click(function() {
	var relParent = null;
	$('#popupTheme').parents().each(function() {
		var pos = $(this).css('position');
		if (pos == 'absolute' || pos == 'relative') {
			relParent = $(this);
		return !relParent;
	var offset = $(this).offset();
	var relOffset = (relParent ? relParent.offset() : {left: 0, top: 0});
	$('#popupThemes').css({left: offset.left - relOffset.left,
		top: - + $(this).outerHeight()});


A select few with no preview:

$('#namedThemes').themes({showPreview: false,
	themes: ['smoothness', 'humanity', 'mintchoc']});
$('#changeThemes').click(function() {
	var smoothness = $('#namedThemes').themes('option', 'themes')[0] === 'southstreet';
	$('#namedThemes').themes('option', {showPreview: false,
		themes: smoothness ? ['smoothness', 'humanity', 'mintchoc'] : ['southstreet', 'cupertino', 'blacktie']});
Additional Themes

You can add new themes to the list as shown below.
The parameters are the id, display name, icon index/URL, preview index/URL, and theme CSS URL.

Add your own:

$.themes.addTheme('bright', 'Bright Eyes',
	'img/bright.png', 'img/bright-big.png', 'bright/');
$('#addTheme').themes({themes: ['smoothness', 'bright'], compact: false});

The following list shows the current themes with their IDs:

var html = '';
$.each($.themes.getThemes(), function(id, theme) {
	if (id != 'bright') {
		html += '<li>' + id + ' - ' + theme.display + '</li>';
In the Wild

This tab highlights examples of this plugin in use "in the wild".

To add another example, please contact me (wood.keith{at} and provide the plugin name, the URL of your site, its title, and a short description of its purpose and where/how the plugin is used.

Quick Reference

A full list of all possible settings is shown below. Note that not all would apply in all cases. For more detail see the documentation reference page.

	themes: [],  // List of theme IDs to use, empty for all
	themeBase: '',  // The base URL for all the theme files
	themeFile: 'jquery-ui.css', // Name of the theme file
	defaultTheme: '', // The ID of the default theme, first one if blank
	icons: 'img/themes.gif', // Horizontal amalgamation of all theme icons
	iconSize: [23, 20],  // The width and height of the individual icons
	previews: 'img/themes-preview.gif', // Horizontal amalgamation of all theme previews
	previewSize: [90, 80],  // The width and height of the individual previews
	showPreview: true,  // True to display a popup preview, false to not show it
	compact: true , // True if a compact presentation should be used, false for full
	cookieExpiry: 0,  // The expiry time for the theme cookie, date or number of days
	cookiePath: '/',  // The path that the cookie applies to
	cookieDomain: '',  // The domain that the cookie applies to
	onSelect: null  // Callback on theme selection, theme ID and URL are passed as parameters

$.themes.setDefaults(settings) // Change settings for all instances

$(selector).themes('option', settings) // Change the instance settings
$(selector).themes('option', name, value) // Change an instance setting
$(selector).themes('option', name) // Retrieve an instance setting

$(selector).themes('destroy') // Remove the themes functionality