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 inheritance</h1>
        </div>

        <div data-role="content">
                Inherits "e"

                <ul data-role="listview" data-inset="true">
                        <li data-role="list-divider">No inheritance</li>
                        <li>No inheritance</li>
                        <li>No inheritance</li>
                </ul>
                                                
                <form id="test" id="test" action="#" method="post">
                  <p>        
                    <label for="text">Inherits "e"</label>
                    <input type="text" name="text" id="text" value=""/>
                  </p>
                  <p>
                    <label for="sound">Inherits "e"</label>
                    <select name="slider" id="sound" data-role="slider">
                        <option value="off">Off</option>
                        <option value="on">On</option>
                    </select>
                  </p>
                          
                  <a href="#" data-role="button">Button (Inherits "e")</a>
                </form>
        </div>        
        
        <div data-role="footer" data-position="fixed">
                <h3>No inheritance</h3>
        </div>                
</div>

Figure 7–8. Theme inheritance

NOTE: Not all components will inherit the theme of their parent container. Refer to the “Inherits Parent Theme” column in Table 7–1 for a listing of components that will not inherit a parent theme.

We can also explicitly set the themes of our individual components. This gives the designer flexibility in regards to styling sites and can help build more rich designs (see Figure 7–9 and its related code in Listing 7–8).

Figure 7–9. Explicit themes

Listing 7–8. Explicit themes (ch7/theme-explicit.html)<div data-role="page" data-theme="e">
    <div data-role="header" data-theme="b">
      <h1>Theme = "b"</h1>
    </div>

    <div data-role="content" data-theme="d">
      Theme = "d"

      <ul data-role="listview" data-theme="e" data-divider-theme="e">
          <li data-role="list-divider">Theme = "e"</li>
          <li>Inherits "e" from list</li>
          <li data-theme="b">Theme = "b"</li>
      </ul>
                                                
      <form id="test" id="test" action="#" method="post">
      <p>        
          <label for="text">Theme "d"</label>
          <input type="text" name="text" id="text" data-theme="d" />
      </p>
      <p>
        <label for="sound">Theme "b"</label>
        <select id="sound" data-role="slider" data-theme="b">
           <option value="off">Off</option>
           <option value="on">On</option>
        </select>
      </p>
                          
      <a href="#" data-role="button" data-theme="a">Button</a>
      </form>
    </div>        
        
    <div data-role="footer" data-position="fixed" data-theme="b">
      <h3>Theme = "b"</h3>
    </div>                
</div>

Theme Precedence

Themes are applied to components with the following order of precedence:

1. Explicit themes—If you explicitly set the data-theme attribute on any component, that theme will override any inherited or default theme.
2. Inherited themes—Inherited themes will override all default themes. For instance, in Listing 7–7, the content container inherited theme “e” from its page container which overrode its default theme “c”. For a list of components that may inherit their theme, refer to the “Inherit’s Parent Theme” column in Table 7–1.
3. Default themes—Default themes are applied when no themes are explicitly set or inherited. For a listing of default themes by component, refer to the “Default Theme” column in Table 7–1.TIP: By default, the minimum height of the content container will only stretch the height of the components inside. This is an issue when the theme of the content is different than the theme of its page container (see Figure 7–10). We can remedy this issue with CSS. For instance, we can set the minimum height of our content container to the height of the screen (see Figure 7–11):ui-content { min-height:inherit; }

Figure 7–10. Content height not 100%

Figure 7–11. Content height 100% (ch7/min-height.html)CopycopyHighlighthighlightAdd NotenoteGet Linklink