colorRoller | jQuery Plugin

$.colorRoller()RC

a jQuery ThemeRoller plugin

$.colorRoller Demo

This $.colorRoller demo uses a primary and secondary ThemeRoller theme.
The secondary theme is scoped using ThemeRoller's scope option [ scope = "secondary" ]

Primary Theme example

example: Primary theme view ThemeRoller theme

Secondary Theme example

example: Primary theme view ThemeRoller theme

Using $.colorRoller colors

After $.colorRoller has loaded, you can style any page element with your ThemeRoller colors (see list of available classes)

Primary Theme class="bgColorHeader borderColorHeader fcHeader"
class="bgColorHighlight borderColorHighlight fcHighlight"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas malesuada diam vel orci aliquam mattis. Nam pretium imperdiet fringilla. Cras vestibulum, elit a dapibus accumsan, urna felis tempus sapien, congue adipiscing erat metus et sem. Cras ut faucibus elit. Sed tempor vestibulum elit blandit tincidunt.
[ cssScope = "" ]
Secondary Theme class="bgColorHeader borderColorHeader fcHeader"
class="bgColorHighlight borderColorHighlight fcHighlight"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas malesuada diam vel orci aliquam mattis. Nam pretium imperdiet fringilla. Cras vestibulum, elit a dapibus accumsan, urna felis tempus sapien, congue adipiscing erat metus et sem. Cras ut faucibus elit. Sed tempor vestibulum elit blandit tincidunt.
[ cssScope = "secondary" ]

Load colors from an external css file (requires PHP)

Select a theme to load from Google CDN:

[ cssScope:"secondary" ]
Another advanced feature of $.colorRoller is to fetch external themes with the help of a local PHP file.
For this demo, we're using ThemeRoller themes hosted on Google CDN.
class="bgColorActive borderColorActive fcActive"
$.colorRoller({themeUrl:"... google CDN theme src ...", themeName:"cdn-theme", cssScope:"secondary"});

Use the colorRoller DOM object to color page elements

Access hex colors from colorRoller DOM object (on page load, using callback function)

Color on the fly:
colorRoller['custom-theme']
.uiHex.bgColorHeader -> ''
Color on the fly:
colorRoller['secondary']
.uiHex.bgColorHeader -> ''

List of CDN hosted jQuery ThemeRoller themes

jQuery ThemeRoller Theme: Black Tie

Black Tie

Google CDN:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/black-tie/jquery-ui.css

Microsoft CDN:
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/black-tie/jquery-ui.css
jQuery ThemeRoller Theme: Blitzer

Blitzer

Google CDN:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/blitzer/jquery-ui.css

Microsoft CDN:
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/blitzer/jquery-ui.css
jQuery ThemeRoller Theme: Cupertino

Cupertino

Google CDN:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.css

Microsoft CDN:
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/cupertino/jquery-ui.css
jQuery ThemeRoller Theme: Dark Hive

Dark Hive

Google CDN:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/dark-hive/jquery-ui.css

Microsoft CDN:
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/dark-hive/jquery-ui.css
jQuery ThemeRoller Theme: Dot Luv

Dot Luv

Google CDN:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/dot-luv/jquery-ui.css

Microsoft CDN:
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/dot-luv/jquery-ui.css
jQuery ThemeRoller Theme: Eggplant

Eggplant

Google CDN:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/eggplant/jquery-ui.css

Microsoft CDN:
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/eggplant/jquery-ui.css
jQuery ThemeRoller Theme: Excite Bike

Excite Bike

Google CDN:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/excite-bike/jquery-ui.css

Microsoft CDN:
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/excite-bike/jquery-ui.css
jQuery ThemeRoller Theme: Flick

Flick

Google CDN:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/flick/jquery-ui.css

Microsoft CDN:
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/flick/jquery-ui.css
jQuery ThemeRoller Theme: Hot Sneaks

Hot Sneaks

Google CDN:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/hot-sneaks/jquery-ui.css

Microsoft CDN:
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/hot-sneaks/jquery-ui.css
jQuery ThemeRoller Theme: Humanity

Humanity

Google CDN:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/humanity/jquery-ui.css

Microsoft CDN:
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/humanity/jquery-ui.css
jQuery ThemeRoller Theme: Le Frog

Le Frog

Google CDN:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/le-frog/jquery-ui.css

Microsoft CDN:
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/le-frog/jquery-ui.css
jQuery ThemeRoller Theme: Mint Choc

Mint Choc

Google CDN:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/mint-choc/jquery-ui.css

Microsoft CDN:
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/mint-choc/jquery-ui.css
jQuery ThemeRoller Theme: Overcast

Overcast

Google CDN:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/overcast/jquery-ui.css

Microsoft CDN:
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/overcast/jquery-ui.css
jQuery ThemeRoller Theme: Pepper Grinder

Pepper Grinder

Google CDN:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/pepper-grinder/jquery-ui.css

Microsoft CDN:
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/pepper-grinder/jquery-ui.css
jQuery ThemeRoller Theme: Redmond

Redmond

Google CDN:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.css

Microsoft CDN:
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/redmond/jquery-ui.css
jQuery ThemeRoller Theme: Smoothness

Smoothness

Google CDN:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css

Microsoft CDN:
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/smoothness/jquery-ui.css
jQuery ThemeRoller Theme: South Street

South Street

Google CDN:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css

Microsoft CDN:
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/south-street/jquery-ui.css
jQuery ThemeRoller Theme: Start

Start

Google CDN:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/start/jquery-ui.css

Microsoft CDN:
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/start/jquery-ui.css
jQuery ThemeRoller Theme: Sunny

Sunny

Google CDN:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/sunny/jquery-ui.css

Microsoft CDN:
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/sunny/jquery-ui.css
jQuery ThemeRoller Theme: Swanky Purse

Swanky Purse

Google CDN:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/swanky-purse/jquery-ui.css

Microsoft CDN:
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/swanky-purse/jquery-ui.css
jQuery ThemeRoller Theme: Trontastic

Trontastic

Google CDN:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/trontastic/jquery-ui.css

Microsoft CDN:
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/trontastic/jquery-ui.css
jQuery ThemeRoller Theme: UI Darkness

UI Darkness

Google CDN:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css

Microsoft CDN:
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/ui-darkness/jquery-ui.css
jQuery ThemeRoller Theme: UI Lightness

UI Lightness

Google CDN:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css

Microsoft CDN:
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/ui-lightness/jquery-ui.css
jQuery ThemeRoller Theme: Vader

Vader

Google CDN:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/vader/jquery-ui.css

Microsoft CDN:
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/vader/jquery-ui.css

dev Mode Output

Setting devMode:true will output a container on your page showing all the available colors and classes, as well as a text box containing the computed css

Usage License | Feedback | © 2017 - Francois du Plessis
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
Creative Commons Licence