jQuery UI 设计主题指南
jQuery UI 的主题设计主要依赖官方在线工具 ThemeRoller，它提供了一个直观的可视化界面，让你无需编写 CSS 就能快速设计、预览和下载自定义主题。ThemeRoller 可以统一调整所有组件（如 Tabs、Datepicker、Button、Accordion 等）的颜色、字体、圆角、阴影、图标等外观，确保 UI 一致性。
工具地址：https://jqueryui.com/themeroller/（当前仍可用，兼容最新 jQuery UI 1.14.1）
ThemeRoller 界面概览
- Gallery 标签：浏览约 24 个预设主题（如 Smoothness、Redmond、UI Lightness），点击即可预览或作为基础修改。
- Roll Your Own 标签：自定义设计模式，左侧是调整面板，右侧是实时预览区（显示 Accordion、Tabs、Datepicker、Slider 等组件的效果）。
设计自定义主题的详细步骤
- 打开 ThemeRoller：访问 https://jqueryui.com/themeroller/
- 选择起点：
- 从 Gallery 选一个预设主题作为基础（推荐 Smoothness）。
- 或直接进入 Roll Your Own 从空白开始。
- 调整参数（左侧面板）：
- Font Settings：字体家族、大小。
- Corner Radius：全局圆角半径（0 为方角）。
- Header/Toolbar：标题栏颜色、背景、边框。
- Content：内容区背景、文字颜色。
- Clickable States：默认（default）、悬停（hover）、激活（active）、焦点（focus）状态的颜色和渐变。
- Highlight & Error：高亮和错误提示样式。
- Overlay & Shadows：模态遮罩不透明度和阴影。
- Icons：图标颜色（默认黑/白）。
调整时，右侧预览会实时更新所有组件效果。
- 预览与测试：右侧面板包含多个交互组件，点击、悬停、展开等操作都能看到实时效果。
- 保存与分享：设计好后，复制浏览器 URL（永久链接），可随时回来修改。
- 下载主题：
- 点击顶部 Download theme 按钮。
- 跳转到 Download Builder，选择 jQuery UI 版本（推荐 1.14.1）和需要的组件（只选用到的，减小体积）。
- 下载 ZIP 包，包含自定义的
jquery-ui.css、jquery-ui.theme.css和images文件夹（图标和背景图）。
- 在项目中使用：
<link rel="stylesheet" href="path/to/your-theme/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="path/to/your/jquery-ui.min.js"></script>自定义主题示例效果
高级提示：
- 如果需要更精细控制，可手动编辑下载的
jquery-ui.theme.css。 - 项目虽已维护模式，但 ThemeRoller 仍是最佳主题设计工具。
- 新项目建议现代替代（如 Bootstrap 或 Tailwind CSS）。
如果您有特定设计需求（如暗黑主题、特定颜色方案），告诉我，我可以指导更详细的配置！
