问题

In jQuery Mobile, there are themes and swatches. Both sounds the same. What is the difference between these two?

回答1:

Theme definition

In jQuery Mobile, a “theme” is a unified visual design applied across the interface. In practical terms, a theme specifies everything from fonts to drop shadows to colors.

Swatch definition

In keeping with the idea of separating layout from color and texture, a jQuery Mobile theme can have multiple “swatches.” A swatch is a unified color concept governing the colors of background, text, shadows, iconography, etc.

The default jQuery Mobile theme includes five swatches (called a, b, c, d, and e). Each swatch provides different visual emphasis, with swatch a being the most visually emphatic (typically white text on a black background), and swatch d being much softer. Swatch e is an “error” swatch.

jQuery Mobile defaults to swatch c in most cases, but it is easy to specify a different swatch using the data-theme attribute. The data-theme attribute can be applied to any enhanced element and will cascade down through child elements.

Example

You can see the differences in this working example: http://jsfiddle.net/Gajotres/VbPRx/

Source example

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <section id="swatch-default" data-role="page">
      <header data-role="header"><h1>jQuery Mobile</h1></header>
      <div class="content" data-role="content">
        <h3>Default Swatch</h3><br>
        <ul data-role="listview">
            <li><a href="#swatch-a">View swatch a</a></li>
            <li><a href="#swatch-b">View swatch b</a></li>
            <li><a href="#swatch-c">View swatch c</a></li>
            <li><a href="#swatch-d">View swatch d</a></li>
            <li><a href="#swatch-e">View swatch e</a></li>
        </ul><br>
        <p>Some sample form elements and buttons:</p>
        <form  action="formprocessor.php" method="post">
          <div data-role="fieldcontain">
            <label for="select-restaurants">Select Your Restaurants:</label>
            <select id="select-restaurants"
                    name="select-restaurants"
                    data-native-menu="false"
                    multiple="multiple">
              <option value="choose" data-placeholder="true">Choose...</option>
              <optgroup label="French">
                <option value="lecentral">Le Central</option>
                <option value="bistrovandome">Bistro Vandome</option>
                <option value="antoines">Antoine's</option>
              </optgroup>
              <optgroup label="Cajun">
                <option value="bayoubobs">Bayou Bob's</option>
                <option value="pappadeaux" disabled="disabled">Pappadeaux</option>
                <option value="luciles">Lucile's</option>
              </optgroup>
            </select>
          </div>
        </form>
        <div data-role="controlgroup" data-type="horizontal">
          <a href="#" data-role="button">Yes</a>
          <a href="#" data-role="button">No</a>
          <a href="#" data-role="button">Cancel</a>
        </div>
      </div>
      </div>
      <footer data-role="footer"></footer>
    </section>

    <section id="swatch-a" data-role="page" data-theme="a">
      <header data-role="header"><h1>jQuery Mobile</h1></header>
      <div class="content" data-role="content">
        <h3>Swatch A</h3><br>
        <ul data-role="listview">
            <li><a href="#swatch-default">View default swatch</a></li>
            <li><a href="#swatch-b">View swatch b</a></li>
            <li><a href="#swatch-c">View swatch c</a></li>
            <li><a href="#swatch-d">View swatch d</a></li>
            <li><a href="#swatch-e">View swatch e</a></li>
        </ul><br>
        <p>Some sample form elements and buttons:</p>
        <form  action="formprocessor.php" method="post">
          <div data-role="fieldcontain">
            <label for="select-restaurants">Select Your Restaurants:</label>
            <select id="select-restaurants"
                    name="select-restaurants"
                    data-native-menu="false"
                    multiple="multiple">
              <option value="choose" data-placeholder="true">Choose...</option>
              <optgroup label="French">
                <option value="lecentral">Le Central</option>
                <option value="bistrovandome">Bistro Vandome</option>
                <option value="antoines">Antoine's</option>
              </optgroup>
              <optgroup label="Cajun">
                <option value="bayoubobs">Bayou Bob's</option>
                <option value="pappadeaux" disabled="disabled">Pappadeaux</option>
                <option value="luciles">Lucile's</option>
              </optgroup>
            </select>
          </div>
        </form>
        <div data-role="controlgroup" data-type="horizontal">
          <a href="#" data-role="button">Yes</a>
          <a href="#" data-role="button">No</a>
          <a href="#" data-role="button">Cancel</a>
        </div>
      </div>
      </div>
      <footer data-role="footer"></footer>
    </section>

    <section id="swatch-b" data-role="page" data-theme="b">
      <header data-role="header"><h1>jQuery Mobile</h1></header>
      <div class="content" data-role="content">
        <h3>Swatch B</h3><br>
        <ul data-role="listview">
            <li><a href="#swatch-default">View default swatch</a></li>
            <li><a href="#swatch-a">View swatch a</a></li>
            <li><a href="#swatch-c">View swatch c</a></li>
            <li><a href="#swatch-d">View swatch d</a></li>
            <li><a href="#swatch-e">View swatch e</a></li>
        </ul><br>
        <p>Some sample form elements and buttons:</p>
        <form  action="formprocessor.php" method="post">
          <div data-role="fieldcontain">
            <label for="select-restaurants">Select Your Restaurants:</label>
            <select id="select-restaurants"
                    name="select-restaurants"
                    data-native-menu="false"
                    multiple="multiple">
              <option value="choose" data-placeholder="true">Choose...</option>
              <optgroup label="French">
                <option value="lecentral">Le Central</option>
                <option value="bistrovandome">Bistro Vandome</option>
                <option value="antoines">Antoine's</option>
              </optgroup>
              <optgroup label="Cajun">
                <option value="bayoubobs">Bayou Bob's</option>
                <option value="pappadeaux" disabled="disabled">Pappadeaux</option>
                <option value="luciles">Lucile's</option>
              </optgroup>
            </select>
          </div>
        </form>
        <div data-role="controlgroup" data-type="horizontal">
          <a href="#" data-role="button">Yes</a>
          <a href="#" data-role="button">No</a>
          <a href="#" data-role="button">Cancel</a>
        </div>
      </div>
      </div>
      <footer data-role="footer"></footer>
    </section>

    <section id="swatch-c" data-role="page" data-theme="c">
      <header data-role="header"><h1>jQuery Mobile</h1></header>
      <div class="content" data-role="content">
        <h3>Swatch C</h3><br>
        <ul data-role="listview">
            <li><a href="#swatch-default">View default swatch</a></li>
            <li><a href="#swatch-a">View swatch a</a></li>
            <li><a href="#swatch-b">View swatch b</a></li>
            <li><a href="#swatch-d">View swatch d</a></li>
            <li><a href="#swatch-e">View swatch e</a></li>
        </ul><br>
        <p>Some sample form elements and buttons:</p>
        <form  action="formprocessor.php" method="post">
          <div data-role="fieldcontain">
            <label for="select-restaurants">Select Your Restaurants:</label>
            <select id="select-restaurants"
                    name="select-restaurants"
                    data-native-menu="false"
                    multiple="multiple">
              <option value="choose" data-placeholder="true">Choose...</option>
              <optgroup label="French">
                <option value="lecentral">Le Central</option>
                <option value="bistrovandome">Bistro Vandome</option>
                <option value="antoines">Antoine's</option>
              </optgroup>
              <optgroup label="Cajun">
                <option value="bayoubobs">Bayou Bob's</option>
                <option value="pappadeaux" disabled="disabled">Pappadeaux</option>
                <option value="luciles">Lucile's</option>
              </optgroup>
            </select>
          </div>
        </form>
        <div data-role="controlgroup" data-type="horizontal">
          <a href="#" data-role="button">Yes</a>
          <a href="#" data-role="button">No</a>
          <a href="#" data-role="button">Cancel</a>
        </div>
      </div>
      </div>
      <footer data-role="footer"></footer>
    </section>

    <section id="swatch-d" data-role="page" data-theme="d">
      <header data-role="header"><h1>jQuery Mobile</h1></header>
      <div class="content" data-role="content">
        <h3>Swatch D</h3><br>
        <ul data-role="listview">
            <li><a href="#swatch-default">View default swatch</a></li>
            <li><a href="#swatch-a">View swatch a</a></li>
            <li><a href="#swatch-b">View swatch b</a></li>
            <li><a href="#swatch-c">View swatch c</a></li>
            <li><a href="#swatch-e">View swatch e</a></li>
        </ul><br>
        <p>Some sample form elements and buttons:</p>
        <form  action="formprocessor.php" method="post">
          <div data-role="fieldcontain">
            <label for="select-restaurants">Select Your Restaurants:</label>
            <select id="select-restaurants"
                    name="select-restaurants"
                    data-native-menu="false"
                    multiple="multiple">
              <option value="choose" data-placeholder="true">Choose...</option>
              <optgroup label="French">
                <option value="lecentral">Le Central</option>
                <option value="bistrovandome">Bistro Vandome</option>
                <option value="antoines">Antoine's</option>
              </optgroup>
              <optgroup label="Cajun">
                <option value="bayoubobs">Bayou Bob's</option>
                <option value="pappadeaux" disabled="disabled">Pappadeaux</option>
                <option value="luciles">Lucile's</option>
              </optgroup>
            </select>
          </div>
        </form>
        <div data-role="controlgroup" data-type="horizontal">
          <a href="#" data-role="button">Yes</a>
          <a href="#" data-role="button">No</a>
          <a href="#" data-role="button">Cancel</a>
        </div>
      </div>
      </div>
      <footer data-role="footer"></footer>
    </section>

    <section id="swatch-e" data-role="page" data-theme="e">
      <header data-role="header"><h1>jQuery Mobile</h1></header>
      <div class="content" data-role="content">
        <h3>Swatch E</h3><br>
        <ul data-role="listview">
            <li><a href="#swatch-default">View default swatch</a></li>
            <li><a href="#swatch-a">View swatch a</a></li>
            <li><a href="#swatch-b">View swatch b</a></li>
            <li><a href="#swatch-c">View swatch c</a></li>
            <li><a href="#swatch-d">View swatch d</a></li>
        </ul><br>
        <p>Some sample form elements and buttons:</p>
        <form  action="formprocessor.php" method="post">
          <div data-role="fieldcontain">
            <label for="select-restaurants">Select Your Restaurants:</label>
            <select id="select-restaurants"
                    name="select-restaurants"
                    data-native-menu="false"
                    multiple="multiple">
              <option value="choose" data-placeholder="true">Choose...</option>
              <optgroup label="French">
                <option value="lecentral">Le Central</option>
                <option value="bistrovandome">Bistro Vandome</option>
                <option value="antoines">Antoine's</option>
              </optgroup>
              <optgroup label="Cajun">
                <option value="bayoubobs">Bayou Bob's</option>
                <option value="pappadeaux" disabled="disabled">Pappadeaux</option>
                <option value="luciles">Lucile's</option>
              </optgroup>
            </select>
          </div>
        </form>
        <div data-role="controlgroup" data-type="horizontal">
          <a href="#" data-role="button">Yes</a>
          <a href="#" data-role="button">No</a>
          <a href="#" data-role="button">Cancel</a>
        </div>
      </div>
      </div>
      <footer data-role="footer"></footer>
    </section>   
</body>
</html>

回答2:

This should help:

http://jquerymobile.com/demos/1.2.1/docs/api/themes.html

The theme system separates color and texture from structural styles that define things like padding and dimensions. This allows theme colors and textures to be defined once in the stylesheet and to be mixed, matched, and combined to achieve a wide range of visual effects.

and