Latest web development tutorials
 

jQuery Mobile Themes


jQuery Mobile Themes

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

To customize the look of your application, use the data-theme attribute, and assign the attribute with a letter:

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

Value Description Example
a Black text on a light gray background for page content
Black text on a gray background for headers and footers
Black text on a light gray background for buttons
White text on a blue background for active buttons
Blue text on links
Light gray text (placeholder) or black text (value) on a white background for input fields
Try it
b White text on a dark gray background for page content
White text on a dark gray background for headers and footers
White text on a charcoal background for buttons
White text on a "cyan" blue background for active buttons
"Cyan" blue text on links
Gray text (placeholder) or white text (value) on a black background for input fields
Try it

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>

The "a" theme is used for most elements, and child elements often inherits the theme of its parent (or page).


Theming Header and Footer

Example

<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
Try it Yourself »

Theming Header and Footer in Dialogs

Example

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

Theming Buttons

Example

<a href="#" class="ui-btn ui-btn-b">Black Button</a>
Try it Yourself »

Theming Icons

Example

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

Theming Popups

Example

<div data-role="popup" id="myPopup" data-theme="b">
Try it Yourself »

Theming Buttons in Header and Footer

Example

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

Theming Navigation Bars

Example

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

Theming Panels

Example

<div data-role="panel" id="myPanel" data-theme="b">
Try it Yourself »

Theming Collapsible Button and Content

Example

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

Theming Lists

Example

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

Theming Split Buttons

Example

<ul data-role="listview" data-split-theme="b">
Try it Yourself »

Theming Collapsible Lists

Example

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

Theming Forms

Example

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

Theming Collapsible Forms

Example

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

Add New Themes

jQuery Mobile also lets you add new themes to your mobile pages.

Add or edit new themes by editing the CSS file (if you have download jQuery Mobile). Just copy a block of styles and rename the classes with a letter name (c-z), and adjust colors and fonts as you like.

You can also add new styles by using theme classes in the HTML document - add the class "ui-bar-(a-z)" for toolbars, "ui-body-(a-z)" for the content and ui-page-theme-(a-z)" for the page:

Example

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

In previous versions of jQuery Mobile, JavaScript used to handle how an element should inherit the parent's theme. As of 1.4, the framework is focused on improved performance and JavaScript has been replaced by pure CSS.

The jQuery Mobile team has created a tool, which helps you to create your own custom theme: The ThemeRoller. You can also use this tool to upgrade older themes to make them compatible with the new version.