Theming content is extremely easy, thanks to the excellent theming system jQuery Mobile is shipped with.
As for collapsible blocks, we can add the data-theme
attribute so we can choose from any swatch color. Various swatches appear as shown in the following screenshot:
However, in order to have the content of collapsible blocks with the same color swatch, we need to add the same data-theme
attribute to the outer container (in most cases, the page div).
A more interesting issue is the one related to the appearance of grids and their blocks: in order to obtain a grid of colorful cells, it is suggested to create an inner div which is styled using classes from a theme (swatch) of our liking:
<div class="ui-grid-b"> <div class="ui-block-a"> <div class="ui-bar ui-bar-b" style="height: 60px"> <p>Content</p> </div> </div> <div class="ui-block-b"> <div class="ui-bar ui-bar-b" style="height: 60px"> ...