主題是以特定的方式來增加他們的易用性。通常，檔案目錄結構如下所示：
<code>themename/</code> – 您的主題必須完全包含在一個單獨的以主題名稱命名的檔案夾内。
<code>themename/themename.css</code> – 這是基本的 CSS 檔案。無論使用了哪個插件，該檔案都必須在每個使用主題的頁面中引用。該檔案應該是輕量級的，隻包括要點。
<code>themename/themename.pluginname.css</code> – 您支援的每個插件都需要一個 CSS 檔案。插件的名稱應直接包含在檔案名中。例如，如果您為 tabs（标簽頁）插件進行主題化，則有：<code>themename.tabs.js</code>。
<code>themename/img.png</code> – 您的主題可以包含圖像。它們可以根據您的喜好進行命名，這裡沒有特定的命名慣例。
如需了解主題檔案結構是如何完成的執行個體，請通路 jQuery UI 基本主題。
為主題編寫樣式是非常簡單的，這是因為主題的靈活性。
所有的主題都應該有一個基本的 CSS class。這個主要的 class 允許使用者啟用禁用主題。您的根 class 的格式應該是 <code>.ui-themename</code>。且它在 HTML 檔案中的用法如下所示：
在上面的執行個體中，發生了一些重要的事情：
我們同時向文檔中加載兩個主題。
整個頁面機器所有内容，是根據 themename 的樣式進行主題化的。
然而，帶有 ui-othertheme class 的 <code><div></code>及其中的每個元素（包括模态對話框）都是根據 othertheme 的樣式進行主題化的。
如果我們打開 <code>themename.css</code> 檔案進行檢視，我們可以看到如下代碼：
請注意，<code>themename.css</code> 檔案隻包括全局通用的樣式資訊，特定插件的樣式資訊不在這裡進行定義。這裡的樣式對所有主題都是适用的。不用擔心一個主題會占據多個檔案 - 這些會在建立和下載下傳的過程被簡化。