Graphite is a curated set of nice, simple, and clean jQuery Mobile themes based on the default jQM swatches. It also comes with a generator script for building your own with a given base color and base highlight color. Since the themes are based on the default swatches, highlight swatches might not match the theme correctly for this release. Theme used in this example is called slate and if you are wondering there are 8 prebuilt themes included.
 
This theme is built for jQuery Mobile 1.3 (up to 1.3.2) and it will not work on higher versions. Swatches are not included, every theme acts as a single swatch.
 

Link

 
Website
 
GitHub
 

Working example

 
Working Plunker example can be found here:
 
Plunker Demo
 
Embedded example:
 
 

Other reviewed themes

 
Click here if you need to go to the original review article.
 
 

Code

 
Code example in case plnkr.co is offline.
 

HTML

 
<!DOCTYPE html>
<html>

<head>
  <title>jQM Complex Demo</title>
  <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
  <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://example.gajotres.net/themes/graphite-master/generated/slate/jquery.mobile-1.3.1.css" />
  <link rel="stylesheet" href="index.css" />
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>

<body>
  <div data-role="page">

    <div data-role="header" data-position="fixed">
      <a href="#" data-role="button">Back</a>
      <h1>My Title</h1>
    </div>
    <!-- /header -->

    <div data-role="content">
      <p>This is a <a href="#">link</a>
      </p>
      <ul data-role="listview" data-inset="true">
        <li data-role="list-divider">Divider</li>
        <li><a href="#">Item 1</a>
        </li>
        <li><a href="#">Item 2</a>
        </li>
        <li><a href="#">Item 3</a>
        </li>
      </ul>
      <label for="flip-1">Flip switch:</label>
      <select name="flip-1" id="flip-1" data-role="slider">
        <option value="off">Off</option>
        <option value="on">On</option>
      </select>
      <a href="#" data-role="button">Click me</a>
      <fieldset data-role="controlgroup">
        <legend>Choose a pet:</legend>
        <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
        <label for="radio-choice-1">Cat</label>

        <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
        <label for="radio-choice-2">Dog</label>

        <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
        <label for="radio-choice-3">Hamster</label>

        <input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
        <label for="radio-choice-4">Lizard</label>
      </fieldset>
      <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
          <legend>Choose as many snacks as you'd like:</legend>
          <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
          <label for="checkbox-1a">Cheetos</label>

          <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
          <label for="checkbox-2a">Doritos</label>

          <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
          <label for="checkbox-3a">Fritos</label>

          <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
          <label for="checkbox-4a">Sun Chips</label>
        </fieldset>
      </div>
      <div class="ui-body">
        <h1>H1 Heading</h1>
        <p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
        <div data-role="collapsible" data-collapsed="true" data-theme="a">
          <h3>I'm a themed collapsible</h3>
          <p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in.</p>
        </div>
        <!-- /collapsible -->
        <div data-role="collapsible" data-theme="a" data-content-theme="a">
          <h3>I'm a themed collapsible with a themed content</h3>
          <p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in.</p>
        </div>
      </div>
      <!-- /themed container -->

      <div data-role="fieldcontain">
        <label for="name-c">Text Input:</label>
        <input type="text" name="name" id="name-c" value="" />
      </div>

      <div data-role="fieldcontain">
        <label for="switch-c">Flip switch:</label>
        <select name="switch-c" id="switch-c" data-role="slider">
          <option value="off">Off</option>
          <option value="on">On</option>
        </select>
      </div>

      <div data-role="fieldcontain">
        <label for="slider-c">Slider:</label>
        <input type="range" name="slider" id="slider-c" value="0" min="0" max="100" />
      </div>


      <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="horizontal">
          <legend>Font styling:</legend>
          <input type="checkbox" name="checkbox-6c" id="checkbox-6c" class="custom" />
          <label for="checkbox-6c">b</label>

          <input type="checkbox" name="checkbox-7c" id="checkbox-7c" class="custom" />
          <label for="checkbox-7c"><em>i</em>
          </label>

          <input type="checkbox" name="checkbox-8c" id="checkbox-8c" class="custom" />
          <label for="checkbox-8c">u</label>
        </fieldset>
      </div>

      <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
          <legend>Choose a pet:</legend>
          <input type="radio" name="radio-choice-1" id="radio-choice-1c" value="choice-1" />
          <label for="radio-choice-1c">Cat</label>

          <input type="radio" name="radio-choice-1" id="radio-choice-2c" value="choice-2" />
          <label for="radio-choice-2c">Dog</label>

          <input type="radio" name="radio-choice-1" id="radio-choice-3c" value="choice-3" />
          <label for="radio-choice-3c">Hamster</label>

          <input type="radio" name="radio-choice-1" id="radio-choice-4c" value="choice-4" />
          <label for="radio-choice-4c">Lizard</label>
        </fieldset>
      </div>

      <div data-role="fieldcontain">
        <label for="select-choice-c" class="select">Choose shipping method:</label>
        <select name="select-choice-c" id="select-choice-c">
          <option value="standard">Standard: 7 day</option>
          <option value="rush">Rush: 3 days</option>
          <option value="express">Express: next day</option>
          <option value="overnight">Overnight</option>
        </select>
      </div>

    </div>
    <!-- /content -->

    <div data-role="footer" data-position="fixed">
      <div data-role="navbar">
        <ul>
          <li><a href="#" data-icon="gear" class="ui-btn-active ui-state-persist">Button 1</a>
          </li>
          <li><a href="#" data-icon="refresh">Button 2</a>
          </li>
          <li><a href="#" data-icon="check">Button 3</a>
          </li>
        </ul>
      </div>
    </div>

  </div>
  <!-- /page -->
</body>

</html>