How to Change the Colour Scheme of Your App On The Fly

So here is a short story behind the current updates to the Vault templates.

Blogplex (released last week) was a hit and got lots of downloads. I guess it was because there were multiple colour schemes and everyone could relate to one of the colours.

Enter the Colour Switcher class

I decided to add a ColorSwitcher class (exclusive to Blogplex up until now) to some other templates as well.

The colour switch was implemented by re-exporting all the neccessary images from the Photoshop file in every colour I wanted to add.

Painful and boring!

Boy, was that a bore. Five hours in and I thought.. there must be an easier way.

Basically in Photoshop, all I was changing was the hue and saturation of the images. I knew there must be a way to do that in code.

And after some Googling , I found it. It so happens that Apple released the Core Image SDK in iOS 5.

Thank God for Core Image

Core Image is normally used to add effects to pictures, the type you see in Instagram.

Then I thought…”Why not add some colour effects to the image slices, hmmm?”.

This is how the new and improved Colour Switcher was born. Basically, you can change the colour scheme of your app on the fly if you really wanted to.

Here is the code. This deserves a “Patent”

[objc]

-(UIImage*)processImageWithName:(NSString*)imageName
{
UIImage* existingImage = [processedImages objectForKey:imageName];

if(existingImage)
{
return existingImage;
}

UIImage* originalImage = [UIImage imageNamed:imageName];
CIImage *beginImage = [CIImage imageWithData:UIImagePNGRepresentation(originalImage)];

CIFilter* hueFilter = [CIFilter filterWithName:@"CIHueAdjust" keysAndValues:kCIInputImageKey, beginImage, @"inputAngle", [NSNumber numberWithFloat:hue], nil];

CIImage *outputImage = [hueFilter outputImage];

CIFilter* saturationFilter = [CIFilter filterWithName:@"CIColorControls" keysAndValues:kCIInputImageKey, outputImage, @"inputSaturation", [NSNumber numberWithFloat:saturation], nil];

outputImage = [saturationFilter outputImage];

CIContext *context = [CIContext contextWithOptions:nil];
CGImageRef cgimg = [context createCGImage:outputImage fromRect:[outputImage extent]];

UIImage *processed;
if ( [[[UIDevice currentDevice] systemVersion] intValue] >= 4 && [[UIScreen mainScreen] scale] == 2.0 )
{
processed = [UIImage imageWithCGImage:cgimg scale:2.0 orientation:UIImageOrientationUp];
}
else
{
processed = [UIImage imageWithCGImage:cgimg];
}

CGImageRelease(cgimg);

[processedImages setObject:processed forKey:imageName];

return processed;
}

[/objc]

UPDATE:The code has been modified so retina images are resized accordingly

What the code does is to take an image and apply a Hue and Saturation filter to it.

Here are the results.

In your app, you will want to do this once and maybe save the files in your bundle for the sake of efficiency.

Updated templates

The first templates to get the Colour switcher is Podradio, Mapper and Blogplex. Please go and download them if you have access.

Let me know what you think in the comments if this can be improved in any way.