You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Oct 8, 2021. It is now read-only.
Copy file name to clipboardExpand all lines: docs/api/themes.html
+9-3Lines changed: 9 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -43,7 +43,13 @@ <h2>ThemeRoller</h2>
43
43
44
44
<h2>jQuery Mobile default theming</h2>
45
45
46
-
<p>If no theme swatch letter is set at all, the framework uses the <strong>a</strong> swatch for headers and footers and, for best contrast, the <strong>c</strong> swatch for the content of a page. All items in this containers inherit the swatch from its parents. One exception is the listdivider in listviews. This always defaults to the <strong>b</strong> (blue in the default theme). Also there is an swatch named "active" (bright blue in the default theme) which is used to indicate an active selected item. For more information about that, read <strong>Global "Active" state</strong> on this page.</p>
46
+
<p>If no theme swatch letter is set at all, the framework uses the "a" swatch (black in the default theme) for headers and footers and the "c" swatch (light gray in the default theme) for the page content to maximize contrast between the both.</p>
47
+
48
+
<p>All items in containers inherit the swatch from their parent. Exceptions to this rule are the listdivider in listviews, the header of nested list pages, and the button of split button lists. Those default to "b" (blue in the default theme). Count bubbles default to "c" (silver in the default theme).
49
+
50
+
<p>Note that there is also a swatch named "active" (bright blue in the default theme) which is used to indicate an active selected item. See the <strong>Global "Active" state</strong> further down this page for further information on the <strong>active</strong> swatch.</p>
51
+
52
+
<p>The page loading dialog and error message don't inherit a swatch theme. The loading dialog defaults to swatch "a" (black in the default theme) and the error message to swatch "e" (yellow in the default theme). You can configure those defaults globally. See <ahref="globalconfig.html">configuring defaults</a>.
47
53
48
54
<h2>Themes & swatches</h2>
49
55
@@ -67,7 +73,7 @@ <h3>Bars</h3>
67
73
<divclass="ui-bar ui-bar-e">Bar E - <ahref="#" data-role="none" class="ui-link">Link</a></div>
68
74
</div><!-- end swatch-bars -->
69
75
70
-
<p>By default, the framework assigns the "a" swatch to all headers and footers, because these are typically given high visual priority in an application. To set the color of a bar to a different swatch color, simply add the <code> data-theme</code> attribute to your header or footer and specify an alternate swatch letter ('b' or 'd', for example) and the specified theme swatch color will be applied. Learn more about <ahref="../toolbars/bars-themes.html">toolbar theming</a>.</p>
76
+
<p>By default, the framework assigns the "a" swatch to all headers and footers, because these are typically given high visual priority in an application. To set the color of a bar to a different swatch color, simply add the <code> data-theme</code> attribute to your header or footer and specify an alternate swatch letter ("b" or "d", for example) and the specified theme swatch color will be applied. Learn more about <ahref="../toolbars/bars-themes.html">toolbar theming</a>.</p>
0 commit comments