jQuery Mobile 的主题系统基于 ThemeRoller 设计，非常强大且易于自定义。它使用一套名为 “Swatch”（色板）的概念，一个主题可以包含多个 Swatch（通常用字母 a–z 表示），默认提供 a（黑色） 和 b（灰色） 两个。
1. 默认内置主题（1.4.x 版本）
jQuery Mobile 1.4.x 自带两个经典 Swatch：
| Swatch | 名称 | 主要颜色 | 适用场景 |
|---|---|---|---|
| a | Black | 深灰/黑色 | 高对比度，常用于主要按钮、头部 |
| b | Gray | 浅灰/白色 | 作为辅助色板，列表、内容区域 |
从 1.4.0 开始，官方还提供了 5 个增强的官方主题包（可直接下载使用）：
- Classic (经典，类似 1.3 风格)
- Cupertino (iOS 风)
- Android (类似旧版 Android)
- Sense (HTC Sense 风格)
- Windows Phone (Metro 风格)
下载地址（历史存档）：http://jquerymobile.com/themeroller/
2. 如何使用主题
<!-- 页面整体使用 swatch a -->
<div data-role="page" data-theme="a">
<!-- 头部栏使用 swatch b -->
<div data-role="header" data-theme="b">
<h1>标题</h1>
</div>
<!-- 按钮使用 swatch a -->
<a href="#" data-role="button" data-theme="a">按钮 A</a>
<!-- 按钮使用 swatch b -->
<a href="#" data-role="button" data-theme="b">按钮 B</a>
<!-- 自定义 swatch（需自己定义） -->
<a href="#" data-role="button" data-theme="c">自定义按钮</a>
</div>3. 自己创建自定义主题（推荐方式）
最简单的方法是使用官方 ThemeRoller 在线工具（虽然现在官网已关闭，但还有很多存量镜像可用）：
常用可用的 ThemeRoller 镜像（2025 年仍能访问的）：
- https://themeroller.jquerymobile.com/ （官方备份）
- https://jquerymobile.com/themeroller/ （有时能打开）
- 国内镜像：https://www.jq22.com/jquery-mobile-themeroller
操作步骤：
- 打开 ThemeRoller
- 可以选择 A、B、C 三个 Swatch 分别设置颜色
- 调整全局配色、圆角、字体、阴影等
- 点击 “Download” 下载主题包
- 解压后把
themes/your-theme.min.css和themes/images/放入项目 - 在页面引入：
<link rel="stylesheet" href="themes/your-theme.min.css" />
<link rel="stylesheet" href="jquery.mobile.structure-1.4.5.min.css" />4. 手动自定义 Swatch（CSS 方式）
如果你不想用 ThemeRoller，也可以直接写 CSS 添加新 Swatch，例如添加一个红色主题 “e”：
/* Swatch e - 红色主题 */
.ui-bar-e,
.ui-page-theme-e .ui-bar-inherit,
.ui-page-theme-e .ui-body-inherit {
background: #d9322f;
border-color: #b0281f;
color: #fff;
text-shadow: 0 1px 0 #900;
}
.ui-body-e,
.ui-page-theme-e .ui-body-inherit {
background: #f9f9f9;
border-color: #ddd;
color: #333;
}
: 0 1px 0 #f3f3f3;
}
.ui-btn-up-e,
.ui-btn-hover-e,
.ui-btn-down-e {
background: #e94542;
border-color: #c73a37;
color: #fff;
text-shadow: 0 1px 0 #b0281f;
}
.ui-btn-active-e,
.ui-page-theme-e .ui-btn-active {
background: #c73a37 !important;
}然后在 HTML 中直接使用 data-theme="e" 即可。
5. 推荐的现代替代方案（2025 年建议）
虽然 jQuery Mobile 已经停止维护（最后版本 1.4.5，2014 年），但如果你现在还在用，推荐：
- 继续使用 ThemeRoller 生成的主题（最兼容）
- 或者直接迁移到轻量级框架：Framework7、Bootstrap 5 + Mobile 插件、Ionic 等
如果你需要，我可以给你提供一个完整的自定义主题模板（比如企业蓝、暗黑模式、Material Design 风格等），直接复制就能用。需要的话告诉我想要什么颜色风格！
