<commit_before><!DOCTYPE html> 
<html> 
	<head>
	<meta charset="utf-8" /> 
	<title>jQuery Mobile Docs - Lists</title> 
	<link rel="stylesheet"  href="../../themes/default/" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
	<script type="text/javascript" src="../../js/jquery.js"></script>
	<script type="text/javascript" src="../../js/"></script>
	<script type="text/javascript" src="../docs/docs.js"></script>
</head> 
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>Theming lists</h1>
	</div><!-- /header -->

	<div data-role="content" class="ui-body">
		

		<p>All the standard button swatches can be applied to lists. The framework assigns a default list theme swatch of &quot;c&quot; (silver in the default theme) and swatch &quot;b&quot; (blue in default theme) for dividers. Below is a default themed list.</p>
		
<code>
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot;&gt;
</code>
		<ul data-role="listview" data-inset="true">
			<li data-role="list-divider">Divider</li>
			<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
			<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
			<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
		</ul>
		
		<h2>Theming list items</h2>
		<p>The list item color scheme can be changed to any button color theme swatch by adding the <code>data-theme</code> attribute to the list, and setting the letter theme swatch. Here is the same list above with the &quot;a&quot; swatch applied. </p>
		
<code>
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-theme=&quot;d&quot;&gt;
</code>
		
		<ul data-role="listview" data-inset="true" data-theme="d">
			<li data-role="list-divider">Divider</li>
			<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
			<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
			<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
		</ul>
		
		<h2>Theming dividers</h2>
		
		<p>The theme for <strong>list dividers</strong> can be set by adding the <code>data-dividertheme</code> to the list and specifying a swatch letter. Here is an example of the same list above with swatch &quot;d&quot; set on the dividers.</p>
		
<code>
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-theme=&quot;d&quot; data-dividertheme=&quot;c&quot;&gt;
</code>
		
		<ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="c">
			<li data-role="list-divider">Divider</li>
			<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
			<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
			<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
		</ul>
		
		<h2>Theming count bubbles</h2>
		
		<p>The theme for <strong>count bubbles</strong> can be set by adding the <code>data-counttheme</code> to the list and specifying a swatch letter. Here is an example with swatch &quot;e&quot; set on the dividers.</p>
		
<code>
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-theme=&quot;a&quot; data-dividertheme=&quot;d&quot; data-counttheme=&quot;e&quot;&gt;
</code>
		
		<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="d" data-counttheme="e">
			<li data-role="list-divider">Divider</li>
			<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
			<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
			<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
		</ul>
		<commit_msg>updated docs to describe new listview li-level data-theme option<commit_after><!DOCTYPE html> 
<html> 
	<head>
	<meta charset="utf-8" /> 
	<title>jQuery Mobile Docs - Lists</title> 
	<link rel="stylesheet"  href="../../themes/default/" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
	<script type="text/javascript" src="../../js/jquery.js"></script>
	<script type="text/javascript" src="../../js/"></script>
	<script type="text/javascript" src="../docs/docs.js"></script>
</head> 
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>Theming lists</h1>
	</div><!-- /header -->

	<div data-role="content" class="ui-body">
		

		<p>All the standard button swatches can be applied to lists. The framework assigns a default list theme swatch of &quot;c&quot; (silver in the default theme) and swatch &quot;b&quot; (blue in default theme) for dividers. Below is a default themed list.</p>
		
<code>
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot;&gt;
</code>
		<ul data-role="listview" data-inset="true">
			<li data-role="list-divider">Divider</li>
			<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
			<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
			<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
		</ul>
		
		<h2>Theming list items</h2>
		<p>The list item color scheme can be changed to any button color theme swatch by adding the <code>data-theme</code> attribute to the list, and setting the letter theme swatch. Here is the same list above with the &quot;a&quot; swatch applied. </p>
		
<code>
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-theme=&quot;d&quot;&gt;
</code>
		
		<ul data-role="listview" data-inset="true" data-theme="d">
			<li data-role="list-divider">Divider</li>
			<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
			<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
			<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
		</ul>
		
		<p>Data-theme attributes also work at the LI-level, for styling a single item.</p>
		
		<ul data-role="listview" data-inset="true" data-theme="d">
			<li data-role="list-divider">Divider</li>
			<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
			<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
			<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
			<li data-theme="a"><a href="index.html">Trash</a> <span class="ui-li-count">34</span></li>
		</ul>
		
		<h2>Theming dividers</h2>
		
		<p>The theme for <strong>list dividers</strong> can be set by adding the <code>data-dividertheme</code> to the list and specifying a swatch letter. Here is an example of the same list above with swatch &quot;d&quot; set on the dividers.</p>
		
<code>
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-theme=&quot;d&quot; data-dividertheme=&quot;c&quot;&gt;
</code>
		
		<ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="c">
			<li data-role="list-divider">Divider</li>
			<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
			<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
			<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
		</ul>
		
		<h2>Theming count bubbles</h2>
		
		<p>The theme for <strong>count bubbles</strong> can be set by adding the <code>data-counttheme</code> to the list and specifying a swatch letter. Here is an example with swatch &quot;e&quot; set on the dividers.</p>
		
<code>
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-theme=&quot;a&quot; data-dividertheme=&quot;d&quot; data-counttheme=&quot;e&quot;&gt;
</code>
		
		<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="d" data-counttheme="e">
			<li data-role="list-divider">Divider</li>
			<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
			<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
			<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
		</ul>
		
{'fraction_non_alphanumeric': 0.21341078418992296, 'fraction_numerical': 0.009344614218967042, 'mean_word_length': 4.625, 'pattern_counts': {'":': 0, '<': 319, '<?xml version=': 0, '>': 319, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7220819', 'n_tokens_mistral': 3209, 'n_tokens_neox': 2891, 'n_words': 638}