jQuery Mobile Themes

jQuery Mobile provides 2 different theme styles, from "a" to "b" - each theme has different colors for buttons, toolbars, content blocks, etc., and each theme has a different visual effect.

You can customize the appearance of the application by setting the data-theme attribute of an element:

<a href="../index.html" class="ui-btn ui-btn-a|b">按钮</a>

Value Description Example
a Page has gray background and black text
Header and footer both have gray background and black text
Buttons have gray background and black text
Active buttons and links have white text on blue background
In input fields, the placeholder attribute value is light gray, and the value is black		 Try it
b Page has black background and white text
Header and footer both have black background and white text
Buttons have white text on charcoal background
Active buttons and links have white text on blue background
In input fields, the placeholder attribute value is light gray, and the value is white		 Try it

Button styles use class="ui-btn". Use the "ui-btn-a|b" class to set the button to gray (default) or black:

<a href="../index.html" class="ui-btn ui-btn-a|b">按钮</a>

lamp The "a" theme style is used for most elements; child elements usually inherit the parent element's style.

Theme Header and Footer

Example

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

Try it »

Theme Dialog Header and Footer

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 »

Theme Buttons

Example

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

Try it »

Theme Icons

Example

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

Try it »

Theme Popup

Example

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

Try it »

Header and Footer Theme Buttons

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">Follow me on Facebook</a>
<a href="#" class="ui-btn">Follow me on Twitter</a>
<a href="#" class="ui-btn ui-btn-b">Follow me on Instagram</a>
</div>

Try it »

Theme Navbar

Example

<div data-role="footer" data-theme="b">
<h1>Text Header</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 »

Theme Panel

Example

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

Try it »

Theme Collapsible Buttons 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 »

Theme List

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 »

Theme Split Buttons

Example

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

Try it »

Theme Collapsible List

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 »

Theme Form

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 »

Theme Collapsible Form

Example

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

Try it »

Add New Theme

jQuery Mobile can add new themes to mobile pages.

You can add or edit new themes by modifying the CSS file (if you have downloaded jQuery Mobile). You just need to copy the style module, then rename the letter class names (c-z), and add the colors and fonts you like to the styles.

You can also add new theme styles in the HTML document. For toolbars, add classes: ui-bar-(a-z); for text content, add classes: ui-body-(a-z); for pages, add classes: ui-page-theme-(a-z).

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 »

Note In previous versions of jQuery Mobile, JavaScript was used to make elements inherit the parent theme styles. After version 1.4, the framework focused more on performance improvements and no longer uses JavaScript for inheritance, but instead uses pure CSS.

The jQuery Mobile team has created a tool for this purpose, at the addressThemeRollerYou can use this tool to upgrade old themes so they are compatible with the new version.
Other Extensions