Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit 9e7e9b9

Browse files
Docs (theming): Added more info about which swatches are used by default.
1 parent 88c4663 commit 9e7e9b9

File tree

1 file changed

+9
-3
lines changed

1 file changed

+9
-3
lines changed

docs/api/themes.html

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,13 @@ <h2>ThemeRoller</h2>
4343

4444
<h2>jQuery Mobile default theming</h2>
4545

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 <a href="globalconfig.html">configuring defaults</a>.
4753

4854
<h2>Themes &amp; swatches</h2>
4955

@@ -67,7 +73,7 @@ <h3>Bars</h3>
6773
<div class="ui-bar ui-bar-e">Bar E - <a href="#" data-role="none" class="ui-link">Link</a></div>
6874
</div><!-- end swatch-bars -->
6975

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 <a href="../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 <a href="../toolbars/bars-themes.html">toolbar theming</a>.</p>
7177

7278

7379

@@ -297,4 +303,4 @@ <h3>More in this section</h3>
297303
</div><!-- /page -->
298304

299305
</body>
300-
</html>
306+
</html>

0 commit comments

Comments
 (0)