4. Theming in iOS

(Please notice that iOS theming is a feature available starting in v5.)

Starting in v5, both FPPickerController and FPSaveController can be themable by setting their theme property to an FPTheme instance.

Let's take a look at what's currently supported:

Supported FPTheme Properties

@property (nonatomic, assign) UIBarStyle navigationBarStyle;

The navigation bar style that specifies its appearance (i.e., UIBarStyleDefault or UIBarStyleBlack).

--

@property (nonatomic, strong) UIColor *navigationBarBackgroundColor;

The background color to apply to the navigation bar. Please notice that this color will also be applied to the popover presentation controller's background for aesthetic purposes.

--

@property (nonatomic, strong) UIColor *navigationBarTintColor;

The tint color to apply to the navigation items and bar button items.

--

@property (nonatomic, strong) UIColor *headerFooterViewTintColor;

The tint (background) color to apply to the table view headers and footers.

--

@property (nonatomic, strong) UIColor *headerFooterViewTextColor;

The text color to apply to the table view headers and footers.

--

@property (nonatomic, strong) UIColor *tableViewBackgroundColor;

The background color to apply to the table view.

--

@property (nonatomic, strong) UIColor *tableViewSeparatorColor;

The color to apply to the table view separators.

--

@property (nonatomic, strong) UIColor *tableViewCellBackgroundColor;

The background color to apply to the table view cells.

--

@property (nonatomic, strong) UIColor *tableViewCellTextColor;

The text color to apply to the table view cells.

--

@property (nonatomic, strong) UIColor *tableViewCellTintColor;

The tint color to apply to the table view cells (i.e. buttons and images)

--

@property (nonatomic, strong) UIColor *tableViewCellSelectedBackgroundColor;

The background color to apply to the table view cell when selected.

--

@property (nonatomic, strong) UIColor *tableViewCellSelectedTextColor;

The text color to apply to the table view cell when selected.

--

@property (nonatomic, strong) UIColor *uploadButtonHappyTextColor;

The text color to apply to the upload button given input is valid.

--

@property (nonatomic, strong) UIColor *uploadButtonAngryTextColor;

The text color to apply to the upload button given input is invalid.

--

@property (nonatomic, strong) UIColor *uploadButtonBackgroundColor;

The background color to apply to the upload button.

Theme Example

Here's a dark blue theme using a dark style bar:

FPTheme *theme = [FPTheme new];

CGFloat hue = 0.5616; // blue-ish hue

// Navigation bar
theme.navigationBarStyle = UIBarStyleBlack;
theme.navigationBarBackgroundColor = [UIColor colorWithHue:hue saturation:0.8 brightness:0.12 alpha:1.0];
theme.navigationBarTintColor = [UIColor colorWithHue:hue saturation:0.1 brightness:0.98 alpha:1.0];

// Table view
theme.headerFooterViewTintColor = [UIColor colorWithHue:hue saturation:0.8 brightness:0.28 alpha:1.0];
theme.headerFooterViewTextColor = [UIColor whiteColor];
theme.tableViewBackgroundColor = [UIColor colorWithHue:hue saturation:0.8 brightness:0.49 alpha:1.0];
theme.tableViewSeparatorColor = [UIColor colorWithHue:hue saturation:0.8 brightness:0.38 alpha:1.0];
theme.tableViewCellBackgroundColor = [UIColor colorWithHue:hue saturation:0.8 brightness:0.49 alpha:1.0];
theme.tableViewCellTextColor = [UIColor colorWithHue:hue saturation:0.1 brightness:1.0 alpha:1.0];
theme.tableViewCellTintColor = [UIColor colorWithHue:hue saturation:0.3 brightness:0.7 alpha:1.0];
theme.tableViewCellSelectedBackgroundColor = [UIColor colorWithHue:hue saturation:0.8 brightness:0.18 alpha:1.0];
theme.tableViewCellSelectedTextColor = [UIColor whiteColor];

// Upload button
theme.uploadButtonBackgroundColor = [UIColor blackColor];
theme.uploadButtonHappyTextColor = [UIColor yellowColor];
theme.uploadButtonAngryTextColor = [UIColor redColor];

Applying this theme to a FPPickerController is simply a matter of assigning our FPTheme instance to FPPickerController's theme property:

fpController.theme = theme;

Exactly the same does apply to FPSaveController:

fpSave.theme = theme;

For a full working example, please check FPPicker iOS Demo.