Theming content

Home

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 fixed footer.)

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 icon and body are not currently themable through data attributes, but can be styled directly with custom css.

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

Themed examples

A theme swatch 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.

B theme swatch 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.

C theme swatch 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.

D theme swatch 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.

E theme swatch 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.