Customizing colors in the iOS SDK

18 January 2012 in Libraries

Today I wanted to talk about another feature we've added to the iOS SDK that I didn't cover before: custom stylesheets. Since you are integrating UserVoice into your app, we thought it would be good for you to have an easy way to tweak the look and feel to match your existing UI a bit better. To do this, we extracted most of the colors that our UI works with into a UVStyleSheet class, and added a simple API that allows you to substitute your own stylesheet.

To create a custom stylesheet, add a new Objective-C class to your project and call it something like CustomUVStyleSheet. Make it a subclass of UVStyleSheet. Then you can override any of the instance methods of UVStyleSheet to provide your own colors. Here's a simple example:

#import "CustomUVStyleSheet.h"

@implementation CustomUVStyleSheet

- (UIColor *)backgroundColor {
    return [UIColor colorWithRed:0.15f green:0.15f blue:0.15f alpha:1.0f];
}

- (UIColor *)darkZebraBgColor {
    return [UIColor colorWithRed:0.1f green:0.1f blue:0.1f alpha:1.0f];
}

- (UIColor *)lightZebraBgColor {
    return [UIColor colorWithRed:0.15f green:0.15f blue:0.15f alpha:1.0f];
}

@end

Then, all you have to do is to pass your stylesheet to the SDK before launching UserVoice.

[UVStyleSheet setStyleSheet:[[[CustomUVStyleSheet alloc] init] autorelease]];

And with that, you should be able to run your app and see custom colors throughout the UserVoice UI! You can find a complete list of the colors you can override in UVStyleSheet.h, with explanations of how they are used.

-Austin Taylor
Developer, UserVoice