1. CIS 136 Building Mobile Apps
Themes
CIS 136 Building Mobile Apps

2. Themes Note: Different releases of jQuery have different themes
jQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content and button colors.
Provides a consistent and touch-friendly look and feel for your widgets across platforms
Built around the following essential concepts:
Swatch
Active State
Theme inheritance
Can also
build your own custom themes
download and use 3rd party themes
Note: Different releases of jQuery have different themes
1.1.1 is a very popular release

3. Themes Swatch - one of several color schemes provided by your theme
uses single-letter designations
the default jQuery Mobile theme provides two swatches
"a" swatch is a neutral, gray swatch
"b" swatch has a darker color scheme designed to contrast with the "a" swatch.

4. Themes Active State The theme defines an "active" state
Gives immediate feedback upon a user action if there should be a brief processing delay
most mobile devices implement a 300ms delay between the time when the user lifts her finger from the touchscreen and the triggering of the "click" event
JQM adds the "active" state to a button whenever the device is poised to emit a "click" event so the user receives immediate feedback that the application is committed to processing the "click" in the next 300ms.

5. Themes (cont.) Theme inheritance
You do not need to specify a swatch for everything
A swatch defined on the outermost container will be inherited by all the tags in the container
Can override swatch for portions of a container by specifying a theme swatch for one of its subcontainers

6. Using the JQM Themeroller tool
Roll your own theme!
Using the JQM Themeroller tool

7. Tool to create custom themes Four easy steps:
Build a theme composed of up to 26 swatches
a "swatch" consists of a header bar, content body, and button states that can be freely mixed and matched to create visual texture — to make richer designs possible
Download the newly created CSS file
Unzip it
Create a themes subfolder in the CSS folder
Copy/move theme files into the subfolder
Refer to new swatches in your project

8. Themeroller Interface
By default, ThemeRoller offers three swatches (a, b and c)
Use the offered default colors
Use the Adobe kuler colors
Create your own

9. Adding Swatches
Add more swatches by pressing the "+" sign near the "A", "B", and "C" tabs, in the left-hand side menu
set the "Global" overarching settings of your theme, such as Font Family, Corner Radii, Icon, and Box

10. Adding Swatches
Expand the various element parts and carry out detailed editing
allows you to change text color, text shadow size, position and color, etc
can also edit the gradient used on each element.

11. Drag and drop
create your theme by dragging the chosen color onto the chosen element in the swatch of your choice

12. Downloading your theme
press the "Download theme zip file button“
enter the name of your theme in the popup window
press the "Download Zip" button on the download popup window

13. Using the theme
The theme gets downloaded on your local machine as a zip file
It contains an index.html file, and a themes folder
The index.html file is an example of how you can now use your theme
The themes folder contains your theme CSS files, and the icons that are used by jQuery Mobile.
To start using your theme, add your theme to the head of your page before the jquery.mobile.structure file (refer to the index.html file contained in the theme)

14. Notes JQM will default to certain swatches when none are specified
page content will default to swatch “a", list dividers to swatch "b", etc
Pro-tip: you can save yourself a ton of time by already having an idea of what kind of theme you want to build
Having different swatches allows you to create different UI settings for unique components, such as the header bar, navbar, and list view

15. Lets try it!