Bar theming

Home

Both the header and footer bars will be styled by default with the theme's "a" color swatch (black in the default theme) because these bars are typically primary in the visual hierarchy of a page.

Theming headers and footers

To set the header or footer bars to a different color in your theme, add the data-theme attribute and specify the letter of the theme swatch (a, b, c, etc.). For example, this will set the bar to swatch "b" (blue in the default theme):

<div data-role="header" data-theme="b">
	<h1>Page Title</h1>
</div>

Theming buttons in toolbars

Any link added inside the header block will be automatically styled as a button that matches the color of the bar's theme swatch. To make a button stand out as a primary call to action, the data-theme attribute can be used to specify a contrasting button color from a different theme swatch. For example, if we set the header to theme "c" (light gray), both buttons would be styled as the "c" button by default. If we wanted the Save button to visually pop, we can override the color by setting the data-theme attribute to "b" (blue in our default theme) on the Save button's anchor.

<a href="add-user.php" data-theme="b">Save</a>

Theme variations

This is a demo of the variation that can be achieved by tweaking the theme swatches and buttons inside the headers and footers.

Headers

Bar theme "a"

New
Cancel

Bar theme "a"

Save

Bar theme "b"

New
Cancel

Bar theme "b"

Save

Bar theme "c"

New
Cancel

Bar theme "c"

Save

Bar theme "d"

New
Cancel

Bar theme "d"

Save

Footers

These are examples of a footer with link buttons inside. Note that footers do not have the same prescriptive markup contentions as headers with button slots so use layout grids or custom styles to achieve the design you want.

left right up down
left right up down
left right up down
left right up down
left right up down