jQuery Mobile: Themes Cheat Sheet

jQuery Mobile provides two different style themes, “a” and “b” – each with different colors for buttons, bars, content blocks, and so on.

<div data-role="page" data-theme="a|b">

For buttons with class=”ui-btn”, use the “ui-btn-a|b” class to style the button either gray (default) or black:

<a href="#" class="ui-btn ui-btn-a|b">Button</a>

# Theming Header and Footer

<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>

# Theming Header and Footer in Dialogs

<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

# Theming Buttons

<a href="#" class="ui-btn ui-btn-b">Black Button</a>

# Theming Icons

<a href="#" class="ui-btn ui-btn-b ui-icon-search ui-btn-icon-notext">Search</a>

# Theming Popups

<div data-role="popup" id="myPopup" data-theme="b">

# Theming Buttons in Header and Footer

<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>

# Theming Navigation Bars

<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>

# Theming Panels

<div data-role="panel" id="myPanel" data-theme="b">

# Theming Collapsible Button and Content

<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>

# Theming Lists

<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>

# Theming Split Buttons

<ul data-role="listview" data-split-theme="b">

# Theming Collapsible Lists

<div data-role="collapsible" data-theme="b" data-content-theme="b">
  <ul data-role="listview">
    <li><a href="#">Agnes</a></li>
  </ul>
</div>

# Theming Forms

<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>

# Theming Collapsible Forms

<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend>