<!-- This is div is required -->
<div id="complete_example"></div>

<!-- place your example between these tags, with correct indentation and whitespace (by default, this serves as user-facing HTML example). -->
<div id="e_example">
	
	<div class="palm-text-wrapper">
		<div class="palm-info-text" x-mojo-loc=''>
			(If you are running this app on device, turn it upside down to see 'palm-dark' styling in action.)
		</div>
		<div class="palm-body-text" x-mojo-loc=''>
	By default, Mojo's widgets are styled to support scenes with dark text on a light background. For dark scenes (light text on a dark background) Mojo provides an alternate set of dark styles.  
		</div>
	
		<div class="palm-body-text" x-mojo-loc=''>To apply this theme to your scene, add the <code>'palm-dark'</code> class to your body or top-level scene element. 
		</div>

	</div>
	
	<div class="palm-group">
		<div class="palm-group-title">
			Optimization
		</div>
		<div class="palm-list">
			<div class="palm-row single">
				<div class="palm-row-wrapper">
					<div class="palm-body-text" x-mojo-loc=''>
				If you don't use dark styling, you can reduce your application load time by declaring that your application will use just the light styles by setting the theme property in your appinfo.json file:		
						<ul><li type="none">"theme": "light"</li></ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- place additional context, explanation or info between these tags -->
<div id="e_about">

</div>

<!-- leave this blank for default html (above), or place code here to override -->
<div id="e_html">place 'palm-dark' class on the top-
level element within your scene:
	
	<div class="palm-scene palm-dark">
		<!-- scene content here -->
	</div>
</div>

<!-- list developer-facing css pertinent to this example, between these tags -->
<div id="e_css">

</div>