jQuery Mobile的主题
jQuery的移动提供了两种不同的风格的主题， "a"和"b" -每一个不同颜色的按钮，栏，内容块，等等。
要自定义应用程序的外观，使用data-theme属性，并指定以字母属性：
<div data-role="page" data-theme="a|b" >
| 值 | 描述 | 例 |
|---|---|---|
| a | 对页面内容浅灰色的背景上的黑色文本 在页眉和页脚灰色背景上的黑色文本 对按钮的浅灰色背景上的黑色文本 蓝色背景上的活跃按钮白色文本 在链接蓝色文本 浅灰色文本（占位符），或在白色背景上输入框的黑色文本（值） | 尝试一下 |
| b | 对页面内容深灰色背景的白色文本 在页眉和页脚为深灰色背景的白色文本 在木炭背景按钮白色文本 白色文本"cyan"蓝色背景的活跃按钮 "Cyan"的链接蓝色文本 灰色文本（占位符），或在黑色背景上的输入字段白色文本（值） | 尝试一下 |
对于按钮class="ui-btn"使用"ui-btn-a|b"类样式按钮或者灰色（默认）或黑色：
<a href="#" class="ui-btn ui-btn-a|b" >Button</a>
在"a"主题用于大多数元素和子元素往往继承父（或页面）的主题。
主题化页眉和页脚
主题化页眉和页脚对话框中
例
<div data-role="page" data-dialog="true" id="pagetwo">
<div
data-role="header" data-theme="b"></div>
<div
data-role="footer" data-theme="b"></div>
</div> 试一试» 主题化按钮
主题化图标
主题化弹出窗口
在页眉和页脚主题化按钮
例
<div data-role="header">
<a href="#" class="ui-btn
ui-btn-b">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn">Search/a>
</div>
<div data-role="footer">
<a href="#" class="ui-btn ui-btn-b">Add Me On Facebook</a>
<a href="#" class="ui-btn">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-btn-b">Add Me On Instagram</a>
</div>
试一试» 主题化导航栏
例
<div data-role="footer" data-theme="b">
<h1>Insert Footer Text
Here</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home" data-theme="a">Button 1</a></li>
<li><a href="#" data-icon="arrow-r">Button 2</a></li>
<li><a href="#" data-icon="arrow-r">Button 3</a></li>
<li><a href="#" data-icon="search" data-theme="a">Button 4</a></li>
</ul>
</div>
</div> 试一试» 主题化面板
主题化可折叠按钮和内容
例
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded
content.</p>
</div> 试一试» 主题化列表
例
<ul data-role="listview" data-theme="b">
<li><a href="#">List
Item</a></li>
<li><a href="#">List
Item</a></li>
<li data-theme="a"><a href="#">List
Item</a></li>
<li><a href="#">List Item</a></li>
</ul> 试一试» 主题化拆分按钮
主题化可折叠列表
例
<div data-role="collapsible" data-theme="b"
data-content-theme="b">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div> 试一试» 主题化表单
例
<label for="name">Full Name:</label>
<input type="text" name="text"
id="name" data-theme="b">
<label for="colors">Choose Favorite
Color:</label>
<select id="colors"
name="colors" data-theme="b">
<option value="red">Red</option>
<option value="green">Green</option>
<option
value="blue">Blue</option>
</select> 试一试» 主题化可折叠形式
例
<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend> 试一试» 添加新主题
jQuery Mobile的，您还可以添加新的主题，您的移动网页。
添加或编辑CSS文件编辑的新主题（如果你有下载jQuery Mobile的）。 只需复制的风格块，重命名一个字母名称（CZ）的类，并且随意调节颜色和字体。
您也可以通过在HTML文档中使用的主题类添加新的风格 - 添加类“UI-酒吧，（AZ）”的工具栏，“UI-贴体（AZ）”为内容和UI的页面主题 - （ AZ）“的页面：
例
<style>
.ui-bar-f {
color: red;
background-color: yellow;
}
.ui-body-f {
font-weight: bold;
color: white;
background-color: purple;
}
.ui-page-theme-f {
font-weight: bold;
background-color: green;
}
</style>
试一试» 在jQuery Mobile的早期版本中，使用JavaScript的处理元素如何继承父的主题。 从1.4版本开始，该框架的重点是提高了性能和JavaScript已经由纯粹的CSS取代。
在jQuery Mobile的团队创造了一个工具，它可以帮助您创建自己的自定义主题： ThemeRoller 。 您还可以使用此工具来升级旧的主题，以使它们与新版本兼容。