jQuery Mobile offers two different theme styles, from "a" to "b" - each theme has distinct colors for buttons, toolbars, content blocks, etc., and each has a different visual effect.
You can customize the appearance of your application by setting the `data-theme` attribute of an element:
Button
| Value | Description | Example |
| --- | --- | --- |
| a | Page has a gray background with black text. Header and footer have a gray background with black text. Buttons have a gray background with black text. Active buttons and links have white text on a blue background. In input fields, the placeholder attribute value is light gray, and the value is black. | (#) |
| b | Page has a black background with white text. Header and footer have a black background with white text. Buttons have white text on a charcoal background. Active buttons and links have white text on a blue background. In input fields, the placeholder attribute value is light gray, and the value is white. | (#) |
Button styles use `class="ui-btn"`, and the `"ui-btn-a|b"` class sets the button to gray (default) or black:
Button
|  | The "a" theme style is used for most elements, and child elements usually inherit the style from their parent. |
| --- |
* * *
## Theme Header and Footer
## Example
[Try it »](#)
* * *
## Theme Dialog Header and Footer
## Example
[Try it »](#)
* * *
## Theme Buttons
## Example
Black Button
[Try it »](#)
* * *
## Theme Icons
## Example
Search
[Try it »](#)
* * *
## Theme Popups
## Example
YouTip