RNThemeManager

WARNING: I noticed this garnered a little attention. This is still very much a work in progress.

This small utility makes theming your iOS apps clean and simple. It was originally created so that I could have themable NIBs that utilized notifications to update view properties such as fonts and colors. I pushed beyond NIB support so that however you create your views, it will respond to your themes.

I also wanted to create a library that could be used by people that aren't app developers, i.e. designers. As long as someone has Xcode installed, they can easily make edits to your theme Plists without slowing down the development process.

Installation

The preferred method of installation is with Cocoapods. The project will be added to the pods repo once I feel it is distribution-worthy.

If you do not wish to use Cocoapods (and you really should), you can manually install RNThemeManager by just dragging and dropping all of the source files into your project. There are no framework dependencies.

Setup

The only required setup is that you create a Plist file named default.plist. The root of this file should be a dictionary. Each key represents the name of an attribute. Values should be either the name of a font, the size of a font, or a hex color code.

Fonts

View a list, and examples, of fonts included with iOS 6 here.

You can include custom fonts in your project and use them in your themes just as you would with a system font. For instructions on importing custom fonts see this Stackoverflow answer.

Font Sizes

RNThemeManager automatically builds your font and size based on the keyword for the font. Each font name must be accompanied by a font size key that is the font name suffixed with "Size". For example:

headerFont : ArialRoundedMTBold
headerFontSize : 24

Then when assigning a font key to a label (or any other view with text), the size will be automatically assigned.

Colors

Colors are fairly simple. Just use a hexidecimal color code for the key value. There is no need to prefix with #.

Theming with NIBs

There are three steps to applying themes within NIBs. All of this is done in the Identity Inspector (⌥ ⌘ 3).

1. Class a view as a respective RNTheme* subclass. You can subclass any of the RNTheme* classes as well.
2. Setup keyPath keys that match the RNTheme* subclass.
3. Set the values to said keyPaths to the keys you defined in your theme plists.

Sorry if that's a little confusing. Here are some pictures.

default.plist

RNThemeButton.h

@interface RNThemeButton : UIButton
<RNThemeUpdateProtocol>

// available theme keys
@property (nonatomic, strong) NSString *backgroundImageKey;
@property (nonatomic, strong) NSString *backgroundColorKey;
@property (nonatomic, strong) NSString *fontKey;
@property (nonatomic, strong) NSString *textColorKey;
@property (nonatomic, strong) NSString *highlightedTextColorKey;

@end

MainStoryboard.storyboard

Theming with Code

// TODO

Using Multiple Themes

To change the active theme, just call the following method:

[[RNThemeManager sharedManager] changeTheme:@"lowcontrast"];

Just make sure you have a plist with whatever theme name you provide.

Updating Views

All RNTheme* subclasses subscribe to notifications when a theme is changed and conform to a custom protocol (that only exists for semantics) called RNThemeUpdateProtocol.

If you wish not to use any of the RNTheme* views (and you certainly do not need to), you can update your views or even view controllers by listening for the following notification:

RNThemeManagerDidChangeThemes

When that notification is sent, the theme file has been changed and all views that are styled with a theme should be updated. An example of RNThemeTextField shows you how I prefer to update my views:

// Somewhere in an -init or -viewDidLoad
// Make sure you remove the observer!
[[NSNotificationCenter defaultCenter] addObserver:self 
                                         selector:@selector(themeDidChangeNotification:) 
                                             name:RNThemeManagerDidChangeThemes 
                                           object:nil];

// ...

- (void)themeDidChangeNotification:(NSNotification *)notification {
    [self applyTheme];
}

// Note: This is the required method of the RNThemeUpdateProtocol protocol 
- (void)applyTheme {
    UIFont *font = nil;
    if (self.fontKey && (font = [[RNThemeManager sharedManager] fontForKey:self.fontKey])) {
        self.font = font;
    }
    UIColor *textColor = nil;
    if (self.textColorKey && (textColor = [[RNThemeManager sharedManager] colorForKey:self.textColorKey])) {
        self.textColor = textColor;
    }
}

Contact

• @nystrorm on Twitter
• @rnystrom on Github
• rnystrom [at] whoisryannystrom [dot] com

License

RNThemeManager is a work from Ryan Nystrom under the MIT license. See the license doc for details.