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 。 您還可以使用此工具來升級舊的主題，以使它們與新版本兼容。