jQuery Mobile には、2つの異なるスタイルテーマ "a" と "b" が用意されています - それぞれ、ボタン、バー、コンテンツ・ブロックなどの色が異なります。
アプリケーションの外観をカスタマイズするには、data-theme属性を使用し、属性に文字を指定します：
<div data-role="page" data-theme="a|b">
| 値 | 説明 | 例 |
|---|---|---|
| a | ページコンテンツは、明るい灰色の背景に黒いテキスト ヘッダとフッタは、灰色の背景に黒いテキスト ボタンは、明るい灰色の背景に黒いテキスト アクティブなボタンは、青い背景に白いテキスト リンクは青いテキスト 入力フィールドは、白い背景に明るい灰色のテキスト（プレースホルダ）または黒いテキスト（値） |
Try it |
| b | ページコンテンツは、濃い灰色の背景に白いテキスト ヘッダとフッタは、濃い灰色の背景に白いテキスト ボタンは、チャコール（炭色）の背景に白いテキスト アクティブなボタンは、シアンブルーの背景に白いテキスト リンクは シアンブルーのテキスト 入力フィールドは、黒い背景にグレーのテキスト（プレースホルダ）または白いテキスト（値） |
Try it |
class="ui-btn" を持つボタンの場合、 "ui-btn-a|b"クラスを使用して、ボタンのスタイルを灰色（デフォルト）または黒色にします：
<a href="#" class="ui-btn ui-btn-a|b">Button</a>
"a" テーマは、ほとんどの要素に使用し、子要素は、親（またはページ）のテーマを継承します。
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
Try it Yourself »
<div data-role="page" data-dialog="true" id="pagetwo">
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
</div>
Try it Yourself »
<a href="#" class="ui-btn ui-btn-b ui-icon-search ui-btn-icon-notext">Search</a>
Try it Yourself »
<div data-role="header">
<a href="#" class="ui-btn ui-btn-b">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn">Search/a>
</div>
<div data-role="footer">
<a href="#" class="ui-btn ui-btn-b">Add Me On Facebook</a>
<a href="#" class="ui-btn">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-btn-b">Add Me On Instagram</a>
</div>
Try it Yourself »
<div data-role="footer" data-theme="b">
<h1>Insert Footer Text Here</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home" data-theme="a">Button 1</a></li>
<li><a href="#" data-icon="arrow-r">Button 2</a></li>
<li><a href="#" data-icon="arrow-r">Button 3</a></li>
<li><a href="#" data-icon="search" data-theme="a">Button 4</a></li>
</ul>
</div>
</div>
Try it Yourself »
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
Try it Yourself »
<ul data-role="listview" data-theme="b">
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li data-theme="a"><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
</ul>
Try it Yourself »
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div>
Try it Yourself »
<label for="name">Full Name:</label>
<input type="text" name="text" id="name" data-theme="b">
<label for="colors">Choose Favorite Color:</label>
<select id="colors" name="colors" data-theme="b">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
Try it Yourself »
<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend>
Try it Yourself »jQuery Mobile には、モバイルページに新しいテーマを追加することもできます。
CSSファイルを編集し、新しいテーマを追加または編集します（jQuery Mobile をダウンロードした場合）。 スタイルのブロックをコピーし、文字（c-z）でクラス名を変更し、好きなように色とフォントを調整してください。
HTML 文書にテーマ・クラスを使用して新しいスタイルを追加することもできます。ツールバーには "ui-bar-(a-z)"、 コンテンツには "ui-body-(a-z)"、ページには ui-page-theme-(a-z)" を追加します：
<style>
.ui-bar-f {
color: red;
background-color: yellow;
}
.ui-body-f {
font-weight: bold;
color: white;
background-color: purple;
}
.ui-page-theme-f {
font-weight: bold;
background-color: green;
}
</style>
Try it Yourself »jQuery Mobile の前のバージョンでは、親のテーマを要素がどのように継承するかを処理するために JavaScript が使われていました。
1.4 時点で、フレームワークはパフォーマンスの向上にフォーカスし、JavaScript は純粋な CSS に置き換えられています。
jQuery Mobile チームは、独自のカスタムテーマを作成するのに役立つツール
ThemeRoller を作成しました。
このツールを使用して古いテーマをアップグレードし、新しいバージョンとの互換性を持たせることもできます。