jQuery UI ThemeRoller
jQuery UI ThemeRoller 指南
ThemeRoller是 jQuery UI 官方提供的在线主题自定义工具，它允许你通过可视化界面快速设计、预览和下载自定义主题，而无需手动编写 CSS。工具基于 jQuery UI 的 CSS 框架，能统一调整所有组件（如 Accordion、Tabs、Datepicker、Button 等）的外观。
当前状态（截至 2025 年 12 月）：工具仍完全可用且功能正常，地址：https://jqueryui.com/themeroller/
主要功能与界面
ThemeRoller 界面分为两个主要标签页：
Gallery：预设主题画廊，提供约 24 个经典主题（如 Smoothness、UI Lightness、Redmond 等），可直接下载或作为基础进一步自定义。
Roll Your Own：从零自定义主题，左侧面板提供各种设置选项，右侧实时预览组件效果。
可自定义选项（左侧面板）
- Font Settings：字体家族、大小。
- Corner Radius：全局圆角半径（使用 CSS3 border-radius，IE8 以下不支持）。
- Header/Toolbar：头部和工具栏颜色、背景。
- Content：内容区域样式。
- Clickable States：默认、悬停（hover）、激活（active）、焦点状态。
- Highlight & Error：高亮和错误状态。
- Overlay & Shadows：模态遮罩和阴影。
- Icons：框架图标颜色。
实时预览组件（右侧）
调整时会即时更新以下组件的外观：
- Accordion（折叠面板）
- Tabs（标签页）
- Datepicker（日期选择器）
- Button（按钮，包括图标按钮）
- Slider（滑块）
- Progressbar（进度条）
- Dialog（对话框）
- Autocomplete、Checkboxradio、Controlgroup、Selectmenu、Spinner、Tooltip 等。
使用步骤
- 打开 https://jqueryui.com/themeroller/
- 在Gallery选择预设主题，或在Roll Your Own从空白开始。
- 调整左侧参数，观察右侧预览变化。
- 满意后点击Download theme，跳转到 Download Builder，选择 jQuery UI 版本（推荐 1.14.1）和需要的组件，然后下载 ZIP 包（包含自定义的
jquery-ui.css和images文件夹）。 - 将下载的文件引入项目即可使用。
小贴士：
- 自定义后可通过分享 URL 保存主题（书签或复制链接）。
- 如果只需快速测试，可直接从 CDN 使用预设主题。
虽然 jQuery UI 已进入维护模式，但 ThemeRoller 仍是设计一致性主题的最便捷工具。如果您需要特定主题的示例（如暗黑模式）或帮助生成某个样式，欢迎提供更多细节！