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