jquery.themeselect
jQuery theme selection plugin, lets you set up a series of themes, each
with one or more CSS files, which are loaded and unloaded when each
theme is selected.
It also allows sub themes to automatically be selected based on best
colour match using ThemeMatch.
Simple, and more complex usages, are shown below. Both of these are
illustrated working in the demo folder.
Synopsis
The simplest usage is like this:
$('select.themeselect').themeselect({
selected: 'light',
themes: [
{ name: 'dark', css: 'simple_dark.css' },
{ name: 'light', css: 'simple_light.css' },
{ name: 'sunset', css: [ 'simple_sunset.css' ] },
{ name: 'ocean', css: [
'content/content_watery.css',
'sidebar/sidebar_ocean.css',
'topbar/topbar_ocean.css',
'theme_ctrlr/ts_green.css',
]},
],
});
What this does is turn the <select>
element into a jquery.themeselect
jQuery plugin, which, when it changes, causes the CSS files to be loaded
and unloaded. The selected: 'light'
parameter causes 'light' to be
loaded initially.
Selecting 'sunset' causes 'simple_light.css' to be unloaded and
'simple_sunset.css' to be loaded instead, and then selecting 'ocean'
causes 'simple_sunset.css' to be unloaded and 'content/content_watery.css',
'sidebar/sidebar_ocean.css', 'topbar/topbar_ocean.css' and
'theme_ctrlr/ts_green.css' to be loaded.
If (for some odd reason) you have multiple theme selection elements then
they need to be kept in sync, one way of doing this is omitting the
selected: 'light'
parameter and adding this:
$('select.themeselect')
.on('theme_selection', (jqevent, name) => {
$('select.themeselect')
.themeselect('select', name, {no_update:true})
.themeselect('redraw');
})
.first().themeselect('select', 'light');
Advanced usage
It is possible to specify sets of sub themes available for some
sub feature that are selected based on colour matching, see
ThemeMatch for more explanation
but here is an example:
$('select.themeselect').themeselect({
themes: [
{ name: 'dark', backgrounds: [ '#000000' ], foregrounds: [ '#ffffff' ] },
{ name: 'light', backgrounds: [ '#ffffff' ], foregrounds: [ '#000000' ] },
{ name: 'sunset', backgrounds: [ '#bbbb77' ], foregrounds: [ '#990000' ] },
{ name: 'ocean', backgrounds: [ '#aaffdd' ], foregrounds: [ '#006600' ] },
],
subs: [
{ name: 'sidebar',
themes: [
{ name: 'sidebar_normal', css: 'sidebar/sidebar_normal.css',
backgrounds: [ '#dddddd' ], foregrounds: [ '#111111' ] },
{ name: 'sidebar_inverse', css: 'sidebar/sidebar_inverse.css',
backgrounds: [ '#222222' ], foregrounds: [ '#dddddd' ] },
{ name: 'sidebar_sunset', css: 'sidebar/sidebar_sunset.css',
backgrounds: [ '#eedd88' ], foregrounds: [ '#cc0000' ] },
{ name: 'sidebar_ocean', css: 'sidebar/sidebar_ocean.css',
backgrounds: [ '#aaffdd' ], foregrounds: [ '#006600' ] },
] },
{ name: 'topbar',
themes: [
{ name: 'topbar_normal', css: 'topbar/topbar_normal.css',
backgrounds: [ '#eeeeee' ], foregrounds: [ '#222222' ] },
{ name: 'topbar_inverse', css: 'topbar/topbar_inverse.css',
backgrounds: [ '#333333' ], foregrounds: [ '#eeeeee' ] },
{ name: 'topbar_sunset', css: 'topbar/topbar_sunset.css',
backgrounds: [ '#bb8844' ], foregrounds: [ '#990000' ] },
{ name: 'topbar_ocean', css: 'topbar/topbar_ocean.css',
backgrounds: [ '#99ddbb' ], foregrounds: [ '#227722' ] },
] },
{ name: 'content',
themes: [
{ name: 'content_light', css: 'content/content_light.css',
backgrounds: [ '#ffffff' ], foregrounds: [ '#000000' ] },
{ name: 'content_dark', css: 'content/content_dark.css',
backgrounds: [ '#000000' ], foregrounds: [ '#ffffff' ] },
{ name: 'content_muddy', css: 'content/content_muddy.css',
backgrounds: [ '#aa8833' ], foregrounds: [ '#662222' ] },
{ name: 'content_watery', css: 'content/content_watery.css',
backgrounds: [ '#aaccdd' ], foregrounds: [ '#005544' ] },
],
subs: [
{ name: 'themeselect',
themes: [
{ name: 'themeselect_red', css: 'theme_ctrlr/ts_red.css',
backgrounds: [ '#807060' ], foregrounds: [ '#ff4444' ] },
{ name: 'themeselect_green', css: 'theme_ctrlr/ts_green.css',
backgrounds: [ '#a0a0c0' ], foregrounds: [ '#117722' ] },
] },
] },
],
})
.on('theme_selection', (jqevent, name) => {
$('.themeselect')
.themeselect('select', name, {no_update:true})
.themeselect('redraw');
})
.first().themeselect('select', 'light');
In this case the root themes (dark, light, sunset and ocean), which have no CSS
files specified, are virtual, and when one of them is selected one theme for
each of the sub components (sidebar, topbar, content and themeselect) based on
best colour match. Colour matching is done based on the background and foreground
meta data above (see ThemeMatch).
Dynamic theme sets
It is not necessary to initialise all the themes at once via parameters to the
constructor, if components are dynamically incorporated then they must be added
later. For example:
my ts = $('.themeselect');
ts.themeselect();
ts.themeselect('add_theme', {
name: 'dark',
backgrounds: [ '#000000' ],
foregrounds: [ '#ffffff' ],
});
ts.themeselect('add_theme', {
name: 'light',
backgrounds: [ '#ffffff' ],
foregrounds: [ '#000000' ],
});
ts.themeselect('add_sub, {
name: 'sidebar',
themes: [
{ name: 'sidebar_normal', css: 'sidebar/sidebar_normal.css',
backgrounds: [ '#dddddd' ], foregrounds: [ '#111111' ] },
{ name: 'sidebar_inverse', css: 'sidebar/sidebar_inverse.css',
backgrounds: [ '#222222' ], foregrounds: [ '#dddddd' ] },
{ name: 'sidebar_sunset', css: 'sidebar/sidebar_sunset.css',
backgrounds: [ '#eedd88' ], foregrounds: [ '#cc0000' ] },
{ name: 'sidebar_ocean', css: 'sidebar/sidebar_ocean.css',
backgrounds: [ '#aaffdd' ], foregrounds: [ '#006600' ] },
]
});
ts.themeselect('redraw');
ES5, ES6 and minification
The dist
folder has the following files available:
File | Description |
---|
themematch.js | Limited ES6 features (works with Node.js v4+ and most browsers) |
themematch_es5.js | ES5 translation (should work with anything) |
themematch_es5.min.js | Minified ES5 translation |
Build
run npm install
to install the dev/build dependencies, and
grunt build
to build.
This will create ES5 dist/themematch.js
and dist/themematch.min.js
files, and run the unit tests against them.