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