DEVHIDE
Login Or Sign up

Difference between Theme and Swatch

3.7k Views Asked by At

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

jquery jquery-mobile markup jquery-mobile-themeroller
Original Q&A
2

There are 2 best solutions below

1
Gajotres On BEST ANSWER

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>
0
Phill Pafford On

This should help:

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

Themes include multiple color "swatches"

Related Questions in JQUERY

Related Questions in JQUERY-MOBILE

Related Questions in MARKUP

Related Questions in JQUERY-MOBILE-THEMEROLLER

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs

Popular Questions

.

Copyright © 2021 Jogjafile Inc.