主题并不是一个新概念。当您使用级联样式表 (CSS) 样式与类设计网站的外观时，很可能已经使用了一些主题。使用框架标准化">设计方法，可以减少工作量和需要编写的代码量。
jQuery UI 现在已经成为主题实现的行业标准。虽然还存在其他的选择，比如 Dojo（与 Dijit 耦合在一起）或 Ext JS，但 jQuery UI 将主题与小部件的使用结合在一起，小部件是用户与日期选择器或按钮进行交互时需要使用的元素。构成 jQuery UI 主题的文件的内部工作原理就是 CSS 与 JavaScript。但是，已经融入 CSS 与 JavaScript 使用中的思维过程和标准化使得 jQuery UI 成为打造网站外观的优秀平台。
jQuery UI 主题
jQuery UI 平台包含两个子框架：小部件框架和 CSS 框架，前者包含 Widget Factory 和一组常用的小部件。Widget Factory 为所有 jQuery UI 小部件提供基础，包括小部件集合中包含的那些常用小部件。创建小部件时，既可以从集合中的任意一个常用小部件开始创建，也可以从头开始创建。了解常用小部件所在的位置之后，就可以在您最喜欢的编辑器中打开它们并查看代码。在编辑器中，既可以通过修改代码来生成自定义的小部件（使用其他任何小部件作为起点），也可以使用相似的结构创建一个小部件。
jQuery UI 主题文件夹结构
在继续查看各种文件及其内容之前，从 jQuery UI 平台下载任意一个主题。下载得到的 ZIP 文件包含三个文件夹：css、js 和 development-bundle。development-bundle 文件夹包含一个名为 themes 的文件夹，该文件夹用于保存开发中 jQuery UI 主题。themes 文件夹还包含一个名为所选/所下载主题（比如 UI lightness）的文件夹，以及一个名为 base 的文件夹。base 文件夹包含您自己的主题的起点。无论是否选择主题，都会下载 base 文件夹。
css 文件夹包含一个名为所下载主题的文件夹。这个主题文件夹包含一个 CSS 文件，它包含应用于所有组件或小部件的 CSS 标记。然而，development-bundle 文件夹还包含一个 themes/[theme-name] 文件夹（此处的 [theme-name] 是所选主题的实际名称），其中包含单独应用于每个组件或小部件的 CSS 文件。这种结构让查找与修改主题的变动变得很简单。图 1 显示了主题文件夹的结构。
图 1. 主题文件夹的结构
图 1 中并未列出 [theme-name] 文件夹中的所有文件，但列出了所有最重要的文件。jquery.ui.all.css 文件导入 jquery.ui.base.css 和 jquery.ui.theme.css 文件，仅使用 jquery.ui.all.css file 文件导入文件十分容易。jquery.ui.base.css 文件导入 jquery.ui.core.css 文件以及来自相同文件夹的其他所有组件和小部件文件（没有显示在图 1 中）。jquery.ui.core.css 文件包含所有小部件文件之间共享的常用类。它为（主题中）所有 jQuery UI 小部件提供了基础的 CSS 类，并为小部件提供常用的可见性与布置。最后一个重要的文件是 jquery.ui.theme.css 文件，它提供主题中所有小部件以及主题本身所共享的常用外观与行为。
jquery.ui.theme.css 文件有三种不同的样式：
Container：该样式定义了容器主题，比如 ui-widget、ui-widget-content 或 ui-widget-header。 States：jQuery UI 小部件使用此样式来定义用户与小部件交互时小部件的外观。这些类包括 ui-state-default、ui-state-hover 和 ui-state-active。 Cues：当应用程序中出现某事件（不由用户操作引起）时，这些类将改变小部件的外观。这些类包括 ui-state-highlight、ui-state-error 和 ui-state-disabled。