# Theming lists

Home

All the standard button swatches can be applied to lists. The framework assigns a default list theme swatch of "c" (silver in the default theme) and swatch "b" (blue in default theme) for dividers. Below is a default themed list.

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

- Divider
- Inbox 12
- Outbox 0
- Sent 328

## Theming list items

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="d">`

- Divider
- Inbox 12
- Outbox 0
- Sent 328

data-theme attributes also work at the LI-level, for styling a single item.

- Divider
- Inbox 12
- Outbox 0
- Sent 328
- Trash 34

## Theming dividers

The theme for list dividers can be set by adding the `data-divider-theme` 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="d" data-divider-theme="e">`

- Divider
- Inbox 12
- Outbox 0
- Sent 328

## Theming count bubbles

The theme for count bubbles can be set by adding the `data-count-theme` 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="d" data-divider-theme="e" data-count-theme="b">`

- Divider
- Inbox 12
- Outbox 0
- Sent 328

## Theming icons

The default icon for each list item is `arrow-r`. To override this, set the `data-icon` attribute on the desired list item to the name of a standard icon. To prevent icons from appearing altogether, set the `data-icon` attribute to "false".

    <li data-icon="info"><a href="#">Notices</a></li>
    <li data-icon="alert"><a href="#">Alerts</a></li>
    <li data-icon="false"><a href="#">No icon</a></li>

- Divider
- Notices
- Alerts
- No icon

## 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:

- ### Broken Bells

  Broken Bells

  Purchase album

- ### Warning

  Hot Chip

  Purchase album

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

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

- ### Broken Bells

  Broken Bells

  Purchase album

- ### Warning

  Hot Chip

  Purchase album

The icon for the split theme can set at the list level by adding the `data-split-icon` 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 (see second list item).

`<ul data-role="listview" data-inset="true" data-split-theme="d" data-split-icon="delete">`

- ### Broken Bells

  Broken Bells

  Purchase album

- ### Warning

  Hot Chip

  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

### More in this section

- List views
- List markup conventions
- Basic linked list
- Nested list
- Numbered list
- Split button list
- List dividers
- Count bubble
- Thumbnails
- Icons
- Content formatting
- Search filter bar
- Inset search filter bar
- Search filter bar with dividers
- Read-only lists
- Read-only inset lists
- Lists with forms
- Inset lists with forms
- Inset styled lists
- List performance test
- Theming lists