This is an attempt to create a custom jQuery Mobile theme, that matches the Holo Light theme which make Android 4.0. The styles are based on Android Design’s Style Guide. Theme uses custom Roboto font so be careful when deploying it.
 
This theme is built for jQuery Mobile 1.1 (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>Android Holo Light Theme for JQuery Mobile</title> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/3875067/holo-light/themes/android-holo-light.min.css" />
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
		<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head> 
<body> 
	<div class="preview ui-shadow swatch">
	<div class="ui-header ui-bar-a" data-swatch="a" data-theme="a" data-form="ui-bar-a" data-role="header" role="banner">
		<a class="ui-btn-left ui-btn ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-btn-up-a" data-iconpos="notext" data-theme="a" data-role="button" data-icon="home" title=" Home ">
			<span class="ui-btn-inner ui-btn-corner-all">
				<span class="ui-btn-text"> Home </span>
				<span data-form="ui-icon" class="ui-icon ui-icon-home ui-icon-shadow"></span>
			</span>
		</a>
		<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Holo Light Demo</h1>
		<a class="ui-btn-right ui-btn ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-btn-up-a" data-iconpos="notext" data-theme="a" data-role="button" data-icon="grid" title=" Navigation ">
			<span class="ui-btn-inner ui-btn-corner-all">
				<span class="ui-btn-text"> Navigation </span>
				<span data-form="ui-icon" class="ui-icon ui-icon-grid ui-icon-shadow"></span>
			</span>
		</a>
	</div>
	
	<div class="ui-content ui-body-a" data-theme="a" data-form="ui-body-a" data-role="content" role="main">
	
		<p>
			Follow me on <a class="ui-link" data-form="ui-body-a" href="http://twitter.com/enathu" data-theme="a">Twitter</a>.
		</p>
		
		<div data-role="fieldcontain">
		    <fieldset data-role="controlgroup">
			<li data-swatch="a" class="ui-li ui-li-divider ui-btn ui-bar-a ui-corner-top" data-role="list-divider" role="" data-form="ui-bar-a">List Header</li>
		
				<input type="radio" name="radio-choice-a" id="radio-choice-1-a" value="choice-1" checked="checked" />
		        <label for="radio-choice-1-a" data-form="ui-btn-up-a" class="ui-corner-none">Radio 1</label>

         		<input type="radio" name="radio-choice-a" id="radio-choice-2-a" value="choice-2" />
	         	<label for="radio-choice-2-a" data-form="ui-btn-up-a">Radio 2</label>

				<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" checked="checked" />
				<label for="checkbox-1" data-form="ui-btn-up-a">Checkbox</label>
					
		    </fieldset>
		</div>

		<div data-role="fieldcontain"> 
			<fieldset data-role="controlgroup" data-type="horizontal">
				<input type="radio" name="radio-view-a" id="radio-view-a-a" value="list" checked="checked"/> 
				<label for="radio-view-a-a" data-form="ui-btn-up-a">On</label> 
				<input type="radio" name="radio-view-a" id="radio-view-b-a" value="grid"  /> 
				<label for="radio-view-b-a" data-form="ui-btn-up-a">Off</label> 
			</fieldset> 
		</div>
		
		<div data-role="fieldcontain">
			<select name="select-choice-1" id="select-choice-1" data-native-menu="false" data-theme="a" data-form="ui-btn-up-a">
				<option value="standard">Option 1</option>
				<option value="rush">Option 2</option>
				<option value="express">Option 3</option>
				<option value="overnight">Option 4</option>
			</select>
		</div>
		
		<input type="text" value="Text Input" class="input" data-form="ui-body-a" />
		
		<div data-role="fieldcontain">
			<input type="range" name="slider" value="50" min="0" max="100" data-form="ui-body-a" data-theme="a" data-highlight="true" />
		</div>
		
		<button data-icon="plus" data-theme="a" data-form="ui-btn-up-a">This is cool!</button>
	</div>
</div>
</body>
</html>