使用 ThemeRoller：
1. 打开 ThemeRoller：
访问 [jQuery UI ThemeRoller](https://jqueryui.com/themeroller/)。
2. 选择基础主题：
在 ThemeRoller 页面上，选择一个基础主题，这将是你定制主题的起点。
3. 调整样式：
- 基础设置： 调整基础设置，如字体、边框、圆角等。
- 调色板： 使用调色板选择颜色，可以手动输入颜色代码或使用默认调色板。
- 高级设置（可选）： 切换到 "Advanced" 选项卡，以更精细地控制主题的各个方面。
4. 预览：
ThemeRoller 提供了实时预览功能，你可以在右侧的预览区域看到你的主题应用在各种 jQuery UI 部件上的效果。
5. 下载主题：
- 点击页面上方的 "Download" 按钮。
- ThemeRoller 将为你生成一个压缩文件，其中包含了生成的 CSS 样式表和图标文件。
6. 引入主题文件：
- 下载并解压缩主题文件。
- 在你的项目中引入生成的 CSS 文件和图标文件。
<!-- 引入 jQuery 核心库 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- 引入自定义主题 -->
<link rel="stylesheet" href="path/to/your/custom-theme/jquery-ui.css">
<!-- 引入 jQuery UI 样式表 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
直接定制 CSS：
如果你更喜欢直接定制 CSS 而不使用 ThemeRoller，你可以：
1. 引入 jQuery UI 样式表：
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
2. 定制 CSS：
直接在你的项目中添加自定义的 CSS 样式，覆盖默认的 jQuery UI 样式。
/* 示例：修改按钮的颜色 */
.ui-button {
background-color: #ff6600;
color: #ffffff;
}
3. 引入 jQuery 核心库：
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
4. 引入其他 jQuery UI 文件（可选）：
如果你使用了其他 jQuery UI 组件，你可能还需要引入相应的组件文件。
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
通过这些步骤，你可以设计和应用符合你项目风格的 jQuery UI 主题。无论你选择使用 ThemeRoller 还是直接定制 CSS，都能够灵活地满足你的设计需求。
转载请注明出处：http://www.zyzy.cn/article/detail/13038/jQuery UI