# Theming content

Home Search

## Theming the content area

The main content area of a page (container with the `data-role="content"` attribute) should be themed by adding the `data-theme` attribute to the `data-role="page"` container to ensure that the background colors are applied to the full page, regardless of the content length. (If you add the `data-theme` attribute to the content container, the background color will stop after the content. So there may be a gap in color between the content and the end of the page.)

Additionally, the content area of a collapsible can be themed to match the theme of the collapsible header using the `data-content-theme` attribute.

`<div data-role="page" data-theme="a" data-content-theme="a">`

## Theming collapsible blocks

To set the color of the collapsible header, add the `data-theme` attribute to the collapsible container. The icons can be set with the `data-collapsed-icon` attribute for the collapsed state and the `data-expanded-icon` attribute for the expanded state of a collapsible. The body is themable through the data attribute `data-content-theme`.

`<div data-role="collapsible" data-collapsed="true" data-theme="a">`

## Themed examples

Swatch "a" on content & collapsible

# H1 Heading

This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.

### I'm a themed collapsible

I have `data-theme` attribute set manually on my container to set the color to match the content block I'm in.

### I'm a themed collapsible with a themed content

I have `data-content-theme` attribute set manually on my container to set the color to match the content block I'm in.

Swatch "b" on content & collapsible

# H1 Heading

This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.

### I'm a themed collapsible

I have `data-theme` attribute set manually on my container to set the color to match the content block I'm in.

### I'm a themed collapsible with a themed content

I have `data-content-theme` attribute set manually on my container to set the color to match the content block I'm in.

Swatch "c" on content & collapsible

# H1 Heading

This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.

### I'm a themed collapsible

I have `data-theme` attribute set manually on my container to set the color to match the content block I'm in.

### I'm a themed collapsible with a themed content

I have `data-content-theme` attribute set manually on my container to set the color to match the content block I'm in.

Swatch "d" on content & collapsible

# H1 Heading

This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.

### I'm a themed collapsible

I have `data-theme` attribute set manually on my container to set the color to match the content block I'm in.

### I'm a themed collapsible with a themed content

I have `data-content-theme` attribute set manually on my container to set the color to match the content block I'm in.

Swatch "e" on content & collapsible

# H1 Heading

This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.

### I'm a themed collapsible

I have `data-theme` attribute set manually on my container to set the color to match the content block I'm in.

### I'm a themed collapsible with a themed content

I have `data-content-theme` attribute set manually on my container to set the color to match the content block I'm in.

Swatch "b" on content & collapsible, using different icons

# H1 Heading

This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.

### I'm a themed collapsible

I have `data-theme` attribute set manually on my container to set the color to match the content block I'm in.

### I'm a themed collapsible with a themed content

I have `data-content-theme` attribute set manually on my container to set the color to match the content block I'm in.

### More in this section

- Content Formatting
- Basic HTML styles
- Layout grids (columns)
- Responsive grids
- Collapsible content blocks
- Collapsible sets (accordions)
- Theming content