jQuery Mobile Theme

jQuery Mobile Theme

jQuery Mobile provides five different style themes, from 'a' to 'e' - each theme comes with buttons, bars, content blocks, and so on with different colors. One theme in jQuery Mobile is composed of various visible effects and colors.

To customize the appearance of the application, use the data-theme attribute and assign a letter to it:

<div data-role="page" data-theme="a|b|c|d|e">
Value Description Example
a Default. White text on a black background. Test
b White text on a blue background / Black text on a gray background Test
c Black text on a light gray background Test
d Black text on a white background Test
e Black text on an orange background Test

Tip:Mix your favorite themes!

By default, jQuery Mobile uses the "a" theme for headers and footers, and the "c" theme (light gray) for header content. However, you can mix themes freely.

Themed pages, content, and footer

Example

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

Try It Yourself

Themed dialog

Example

<a href="#pagetwo" data-rel="dialog">Go To The Themed Dialog Page</a>
<div data-role="page" id="pagetwo" data-overlay-theme="e">
  <div data-role="header" data-theme="b"></div>
  <div data-role="content" data-theme="a"></div>
  <div data-role="footer" data-theme="c"></div>
</div>

Try It Yourself

Themed buttons

Example

<a href="#" data-role="button" data-theme="a">Button</a>
<a href="#" data-role="button" data-theme="b">Button</a>
<a href="#" data-role="button" data-theme="c">Button</a>

Try It Yourself

Themed icons

Example

<a href="#" data-role="button" data-icon="plus" data-theme="e">Plus</a>

Try It Yourself

Themed buttons in the header and footer

Example

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">Home</a>
  <h1>Welcome To My Homepage</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">Search</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">Button 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">Button 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">Button 3</a>
</div>

Try It Yourself

Themed navigation bar

Example

<div data-role="footer" data-theme="e">
  <h1>Insert Footer Text Here</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">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

Themed collapsible button and content

Example

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <h1>Click me - I'm collapsible!</h1>
  <p>I'm the expanded content.</p>
</div>

Try It Yourself

Themed List

Example

<ul data-role="listview" data-theme="e">
  <li><a href="#">List Item</a></li>
  <li data-theme="a"><a href="#">List Item</a></li>
  <li data-theme="b"><a href="#">List Item</a></li>
  <li><a href="#">List Item</a></li>
</ul>

Try It Yourself

Themed split button

Example

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

Try It Yourself

Themed collapsible list

Example

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

Try It Yourself

Themed form

Example

<label for="name">Full Name:</label>
<input type="text" name="text" id="name" data-theme="a">
<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

Themed collapsible form

Example

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

Try It Yourself

Add new theme

jQuery Mobile also allows you to add new themes to mobile pages.

Add or edit new themes by editing the CSS file (such as the downloaded jQuery Mobile). Just copy a style segment, rename the class with a letter name (f-z), and then adjust it to your favorite color and font.

You can also add new styles by using theme classes in HTML documents - add the class ui-bar-(a-z) for the toolbar and ui-body-(a-z) for the content:

Example

<style>
.ui-bar-f
{
color:green;
background-color:yellow;
}
.ui-body-f
{
font-weight:bold;
color:purple;
}
</style>

Try It Yourself