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:
| 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:
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="footer" data-theme="b"></div>
Theming Header and Footer in Dialogs
Example
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
</div>
Theming Buttons
Theming Icons
Example
Theming Popups
Theming Buttons in Header and Footer
Example
<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
Example
<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
Theming Collapsible Button and Content
Example
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
Theming Lists
Example
<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
Theming Collapsible Lists
Example
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div>
Theming Forms
Example
<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
Example
<legend>Click me - I'm collapsible!</legend>
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
.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>
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.
