Theme Basics

In many examples we have already seen how we can use the data-theme attribute to apply alternate themes to our page containers (page, header, content, footer) and form elements. For instance, we can take an un-themed page (see Figure 7–1) and re-style it with a different header and list theme (see Figure 7–2) with the simple addition of data-theme attributes (see Listing 7–1).

Figure 7–1. List with default theme

Figure 7–2. List with alternate theme

Listing 7–1. data-theme attribute (ch7/theme-list2.html)<div data-role="page">
        <div data-role="header" data-theme="b">
                <h1>jMovies</h1>
        </div>

        <div data-role="content">
                <ul data-role="listview" data-inset="true" data-theme="a">
                        <li data-role="list-divider">Now Playing</li>
                </ul>
        </div>
</div>CopycopyHighlighthighlightAdd NotenoteGet Linklink