默认主题
jQuery UI 默认提供了一系列主题，它们都有命名，如 "smoothness"、"redmond"、"start" 等。你可以在引入 jQuery UI 样式表时选择其中一个主题。
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
在上述例子中，"smoothness" 主题被应用。你可以在 jQuery UI 官方网站的 ThemeRoller 页面预览和选择默认主题：
- [jQuery UI ThemeRoller](https://jqueryui.com/themeroller/)
自定义主题
你还可以使用 ThemeRoller 工具创建自定义的 jQuery UI 主题。ThemeRoller 允许你调整部分或全部的颜色、字体、边框等样式，以及选择不同的图标。
创建自定义主题的步骤：
1. 打开 ThemeRoller 工具：[jQuery UI ThemeRoller](https://jqueryui.com/themeroller/)
2. 在页面上选择想要定制的样式，如字体、边框、背景等。
3. 使用调色板选择颜色。
4. 预览并下载自定义主题。
下载后，你会得到一个压缩文件，其中包含了 CSS 样式表和图标文件。将这些文件引入到你的项目中，以应用自定义主题。
<link rel="stylesheet" href="path/to/your/custom-theme/jquery-ui.css">
引入主题的注意事项
请确保在引入 jQuery UI 样式表之前引入 jQuery 核心库，以便样式正确应用。
<!-- 引入 jQuery 核心库 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- 引入 jQuery UI 样式表 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
总体而言，使用主题是 jQuery UI 定制外观的一种简单而有效的方式。通过选择或创建适合项目的主题，你可以为用户界面提供一致的外观和良好的用户体验。
转载请注明出处：http://www.zyzy.cn/article/detail/13035/jQuery UI