jQuery Mobile 提供了 2 种不同的主题样式, 从 "a" 到 "b" - 每一种主题的按钮，工具条，内容块等等颜色都不一致，每个主题的视觉效果也不一样。
通过设置元素的data-theme属性可以自定义应用的外观:
按钮
| 值 | 描述 | 实例 |
|---|---|---|
| a | 页面为灰色背景黑色文字 头部与底部均为灰色背景黑色文字 按钮为灰色背景黑色文字 激活的按钮和链接为白色文本蓝色背景 input 输入框中 placeholder 属性值为浅灰色，value 值为黑色 |
尝试一下 |
| b | 页面为黑色背景白色文字 头部与底部均为黑色背景白色文字 按钮为白色文字木炭背景 激活的按钮和链接为白色文本蓝色背景 input 输入框中 placeholder 属性值为浅灰色，value 值为白色 |
尝试一下 |
按钮样式使用 class="ui-btn",使用 "ui-btn-a|b" 类设置按钮为灰色（默认）或黑色：
按钮
 |
"a" 主题的样式用于大多数元素，子元素通常继承父元素的样式。 |
|---|
主题头部和底部
主题对话框的头部底部
主题按钮
主题图标
主题弹窗
头部和底部的主题按钮
主题导航栏
主题面板
主题可折叠按钮和内容
主题列表
主题分割按钮
主题可折叠列表
主题表单
主题可折叠表单
添加新主题
jQuery Mobile 可以在移动页面添加新主题。
通过修改 CSS 文件来添加或编辑新主题(如果你已经下载了 jQuery Mobile)。你只需要拷贝样式模块，然后重命令字母类名（c-z）,并在样式中添加你喜欢的颜色和字体。
你也可以在 HTML 文档中添加主题的新样式， 工具条添加类： ui-bar-(a-z) ，文本内容添加类: ui-body-(a-z) ,页面添加类：ui-page-theme-(a-z) 。
|
在之前的 jQuery Mobile 版本中, 使用 JavaScript 来为元素继承父主题样式。到了 1.4 版本后，框架更注重性能上的提升，已不再使用 JavaScript 来继承，而是使用纯 CSS。 jQuery Mobile 团队为此已经创建了一个工具，地址为ThemeRoller。你可以使用该工具来升级旧的主题，使其兼容新的版本。 |
|---|