Chameleon on iOS: Getting Started

Adding Contrast

To fix this discrepancy between the colors of the back button and navigation title, ensure that the navigation bar title color contrasts the selectedColor. Add the following to the end of updateAppTheme():

let contrastingColor = UIColor(contrastingBlackOrWhiteColorOn:selectedColor, 
                               isFlat: true)
navigationController?.navigationBar.titleTextAttributes = [.foregroundColor : contrastingColor]

Great! With that addition, updateAppTheme() should look like this.

func updateAppTheme() {
  Chameleon.setGlobalThemeUsingPrimaryColor(selectedColor, with: .contrast)
  navigationController?.navigationBar.barTintColor = selectedColor
  let contrastingColor = UIColor(contrastingBlackOrWhiteColorOn:selectedColor, isFlat: true)
  navigationController?.navigationBar.titleTextAttributes = 
    [.foregroundColor : contrastingColor]
}

It’s time for another build and run. This time, the navigation bar’s text always updates to contrast the background.

Setting the global app theme like you did earlier with setGlobalThemeUsingPrimaryColor(_:with:) will update the status bar as well. So why isn’t it changing?

To fix the status bar, open Info.plist. Hover over Information Property List, and tap the plus button to add a new property. Enter View controller-based status bar appearance as the name, set the type to Boolean and the value to NO.

This is all you need to give Chameleon control over the status bar. Build and run the app, and you should see the navigation bar’s back button, title, and the status bar, all change as you switch colors.

Gradient Colors

You’ve applied global app theming and you did the extra work to keep the colors compatible with each other. Now, there’s one last change you can do to make the app stand out.

In ViewController.swift, find showColorPicker(_:), and add the following line before calling navigationController?.pushViewController:

colorPicker.view.backgroundColor = selectedColor

This will set the color picker’s background color to the last color you selected. Give it a build run, and take a look.

No, thanks! The selected color blends in with the buttons, the navigation bar, and the other colors. A gradient color would work better here. You can add some life to the empty part of the color picker while keeping the rest of it with a plain, white background.

Remove the line of code that you added to showColorPicker(_:) and replace it with this:

colorPicker.view.backgroundColor = UIColor(gradientStyle: .topToBottom,
                                           withFrame: colorPicker.view.frame,
                                           andColors: [.flatWhite, .flatWhite, 
                                                       selectedColor])

This sets the background color to a top-to-bottom gradient. The top two-thirds is Chameleon’s flat white and the bottom one-third is the selected color. You pass colorPicker.view.frame for Chameleon to determine how to break up the different colors in the gradient.

You’re done! Build and run the app, and take a look at your finished product.

Where To Go From Here?

As you’ve seen, Chameleon lets you work with colors and theme your app with ease. You can download the completed version of the project using the Download Materials button at the top or bottom of this tutorial.

Don’t forget to take a look at the Chameleon Documentation to stay up-to-date with all the new features.

Do you want to learn more about Color Theory? Building the projects from our iOS Tutorials will help to develop an eye for UI design.

If you have any questions about this tutorial, or about Chameleon and color theory in general, we’d love to hear from you in the discussion forum below!