Themes

Home

Theming overview

Every layout and widget in jQuery Mobile is designed around a new object-oriented CSS framework that makes it possible to apply a complete unified visual design Theme to sites and applications. The theming system is similar to the ThemeRoller system in jQuery UI, but adds a few important improvements:

Themes & swatches

The key to the Theme system is separation of color and texture, from structural styles that define things like padding and dimensions. This allows theme colors and textures to be defined once in the stylesheet and be mixed, matched and combined to achieve a wide range of visual effects.

Each Theme includes several global settings, including font family, drop shadows for overlays, and corner radius values for buttons and boxes. In addition, the Theme can include multiple color "swatches", each with color values for bars, content blocks, buttons and list items, and font text-shadow.

jQuery Mobile's default Theme includes 5 swatches that are given letters (a, b, c, d, e) for quick reference. To make mapping of color swatches consistent across our widgets, we have followed the convention that swatch "a" is the highest level of visual priority (black in our default theme), "b" is secondary level (blue) and "c" is the baseline level (gray) that we use by default in many situations, "d" for an alternate secondary level and "e" as an accent swatch. Themes may have additional swatches for accent colors or specific situations. For example, you could add a new theme swatch "f" that has a red bar and button for use in error situations.

A new ThemeRoller tool will launched with the jQuery Mobile 1.0 release in 2011. In the meantime, it's simple to manually edit the base swatches in the default theme and/or add additional swatches by editing the theme css file: copy a block of swatch styles, rename the classes with the new swatch letter name, and tweak colors.

Bars

The default theme contains the following five Bar styles:

Bar A
Bar B
Bar C
Bar D
Bar E

By default, the framework assigns the "a" swatch to all headers and footers, because these are typically given high visual priority in an application. To set the color of a bar to a different swatch color, simply add the data-theme attribute to your header or footer and specify an alternate swatch letter ('b' or 'd', for example) and the specified theme swatch color will be applied. Learn more about toolbar theming.

Content Blocks

The default theme also includes color swatch values for use in content blocks, designed to coordinate with the header color swatches in the theme.

Block A
Block B
Block C
Block D
Block E

If a theme isn't specified on a content block, the framework will default to "c" to maximize contrast against the default header "a", as shown here:

Back

Default Header

Default Theme Content Header

This is the default content color swatch and a preview of a link.

Cache settings:
Button

Learn more about content theming.

Lists & Buttons

Each swatch also includes default styles for interactive elements like list items and buttons.

A button is included for each swatch in the theme. Each button has styles for normal, hover/focus and pressed states.

By default, any button that's placed in a bar is automatically assigned a swatch letter that matches its parent bar or content box, to visually integrate the button into the parent theme like a chameleon, as shown here:

Bar A

Button A

Bar B

Button B

Bar C

Button C

Bar D

Button D

Bar E

Button E

This default behavior makes it easy to ripple a theme change through a page by setting a theme swatch on a parent because you know the buttons will maintain the same relative visual weight across themes. Since form elements use the button styles, they will also adapt to their parent container too.

If you want to add visual emphasis to a button and help it stand out visually from its parent toolbar, an alternate swatch color can be set by adding a data-theme="a" to the anchor. Once an alternate swatch color is set on a button in the markup, the framework won't override that color if the parent theme is changed, because you made a conscious decision to set it.

A B C D E
A B C D E
A B C D E
A B C D E
A B C D E

Learn more about list theming and button theming.

Global "Active" state

The jQuery Mobile framework uses a single Theme-level swatch called "active" (bright blue in the default theme) to consistently indicate the selected state, regardless of the individual swatch of the given widget. We apply this in navigation and form controls whenever there is a need to indicate what is currently selected. Because this theme swatch is designed for clear, consistent user feedback, it cannot be overridden via the markup; it is set once in the Theme and applied by the framework whenever a selected or active state is needed. The styling for this state is in the theme stylesheet under the ui-btn-active style rules.

Active is used for the on state of these toggles:

Icons

There a core set of standard icons included in the framework that can be assigned to any button. To minimize the download size of the core icons, jQuery Mobile only includes these icons in white and automatically adds a semi-transparent black circle behind the icon to make sure it has good contrast on all background colors.

Learn more about theming individual components: