Theming lists

Assigning theme swatches to lists

All the standard button swatches can be applied to lists. Here is an example of the default list theme "c" (silver in the default theme) with default divider swatch "b" (blue in default theme).

<ul data-role="listview" data-inset="true">

• Divider
• Inbox 12
• Outbox 0
• Sent 328

The list item color scheme can be changed to any button color theme swatch by adding the data-theme attribute to the list, and setting the letter theme swatch. Here is the same list above with the "a" swatch applied.

<ul data-role="listview" data-inset="true" data-theme="a">

• Divider
• Inbox 12
• Outbox 0
• Sent 328

Theming dividers

The theme for list dividers can be set by adding the data-dividertheme to the list and specifying a swatch letter. Here is an example of the same list above with swatch "d" set on the dividers.

<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="d">

• Divider
• Inbox 12
• Outbox 0
• Sent 328

Theming count bubbles

The theme for count bubbles can be set by adding the data-counttheme to the list and specifying a swatch letter. Here is an example with swatch "e" set on the dividers.

<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="d" data-counttheme="e">

• Divider
• Inbox 12
• Outbox 0
• Sent 328

Theming split buttons

For split lists which a second button, the framework default to "b" for the theme swatch (blue in the default theme) Here is a default split list:

• Divider
• Inbox 12 Purchase album
• Outbox 0 Purchase album
• Sent 328 Purchase album

<ul data-role="listview" data-inset="true" data-splittheme="a">

To specify the color swatch for the icon button on the right, add the data-splittheme to the list and specifying a swatch letter. This attribute can also be added to individual split inside list items by adding a data-theme attribute to specific links.

• Divider
• Inbox 12 Purchase album
• Outbox 0 Purchase album
• Sent 328 Purchase album

The icon for the split theme can set at the list level by adding the data-spliticon to the list and specifying a standard icon. This attribute can also be added to individual split inside list items by adding a data-icon attribute to specific links.

<ul data-role="listview" data-inset="true" data-splittheme="a" data-spliticon="plus">

• Divider
• Inbox 12 Purchase album
• Outbox 0 Purchase album
• Sent 328 Purchase album

Examples of all basic list swatches

A swatch

• Inbox 12
• Outbox 0
• Trash 62

B swatch

• Inbox 12
• Outbox 0
• Trash 62

C swatch

• Inbox 12
• Outbox 0
• Trash 62

D swatch

• Inbox 12
• Outbox 0
• Trash 62

E swatch

• Inbox 12
• Outbox 0
• Trash 62

Theme variations

A page, A lists, D dividers

B page, C lists, D dividers

D page, C lists, E dividers