Theme Inheritance

Components can also inherit the themes of their parent containers. Theme inheritance is beneficial in two regards. First, it makes the styling process more efficient for designers because we can rapidly set a theme at a high level (page container) and that theme will cascade down to all sub-components, saving valuable time. Secondly, it keeps components styled consistently across the entire application. For instance, in Listing 7–7, we have styled our page container with data-theme=”e”. As a result, the content theme is inheriting the “e” theme from its parent container (see Figure 7–8).

Listing 7–7. Theme inheritance (ch7/theme-inheritance.html)

<div data-role="page" data-theme="e">         <div data-role="header">                 <h1>No ...

Get Pro jQuery Mobile now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.