Skip to main content
Contact SalesFree Trial
Contact SalesFree Trial
Language:

Theming

PhotoEditor SDK supports adapting the appearance of the editor UI to the look and feel of your application via theming. Theming is part of configuring the editor, for a detailed explanation of how to configure different editor views, refer to this guide.

Light and Dark Theme#

While a dark color theme is the default, and a light color theme is also supported, in many cases we want the UI to dynamically switch between dark and light as in this example. Assigning .dynamic to the global theme property of the Configuration object switches between the light and dark theme depending on the active UITraitCollection.userInterfaceStyle.

Colors#

Modifying the properties of the theme objects allows customizing the color of UI elements. The use of system colors is recommended since they automatically adapt to the current trait environment. It's also possible to take advantage of this effect using a custom color by assigning a UIColor object that sets a color based on the current userInterfaceStyle.

UI elements#

For more fine-grained control over the UI appearance, we provide an appearanceProxyConfigurationClosure which is called after the theme was applied via UIAppearance proxies during the initialization of a CameraViewController or a MediaEditViewController subclass. It is intended to run custom calls to UIAppearance proxies to customize specific UI components. Consult the offical documentation on when a specific property can be configured via the UIAppearance proxy API.

The immutable active theme that is passed to this closure can be used to configure the appearance properties of individual UI elements.

Overlay Buttons#

In our example, we are ensuring that overlay buttons match the tint color of the view they are embedded in and are adding some opacity to the button background.

Menu Cells#

Menu cells are another group of UI elements that can be configured in this fashion. Here we are customizing the border width or selected cells and their corner radius.

File:
import PhotoEditorSDK
import UIKit


class PhotoThemingSwift: Example, PhotoEditViewControllerDelegate {
  override func invokeExample() {
    // Create a `Photo` from a URL to an image in the app bundle.
    let photo = Photo(url: Bundle.main.url(forResource: "LA", withExtension: "jpg")!)


    // Create a `Configuration` object.
    let configuration = Configuration { builder in
      // The recommended way to change the appearance of the UI elements is by configuring the `Theme`.
      // The default is a dark color theme but there is also a predefined light color theme. Here we
      // use a theme that switches dynamically between the light and the dark theme based on the active
      // `UITraitCollection.userInterfaceStyle`.
      builder.theme = .dynamic


      // The base colors of the UI elements can be customized at a central place by modifying the properties of the theme.
      // Use a static color.
      builder.theme.backgroundColor = .darkGray
      // Use system colors that automatically adapt to the current trait environment.
      builder.theme.menuBackgroundColor = .secondarySystemBackground
      builder.theme.toolbarBackgroundColor = .tertiarySystemBackground
      builder.theme.primaryColor = .label
      // Define and use a custom color that automatically adapts to the current trait environment.
      builder.theme.tintColor = UIColor { $0.userInterfaceStyle == .dark ? .green : .red }


      // This closure is called after the theme was applied via `UIAppearance` proxies during the initialization of a `CameraViewController` or a `MediaEditViewController` subclass.
      // It is intended to run custom calls to `UIAppearance` proxies to customize specific UI components. The API documentation highlights when a specific property can be configured
      // with the `UIAppearance` proxy API.
      builder.appearanceProxyConfigurationClosure = { theme in
        // The immutable active theme is passed to this closure and can be used to configure appearance properties.
        // Change the appearance of all overlay buttons.
        OverlayButton.appearance(whenContainedInInstancesOf: [MediaEditViewController.self]).tintColor = theme.tintColor
        OverlayButton.appearance().backgroundColor = UIColor.systemBackground.withAlphaComponent(0.3)


        // Change the appearance of all menu cells.
        MenuCollectionViewCell.appearance().selectionBorderWidth = 3
        MenuCollectionViewCell.appearance().cornerRadius = 5
      }
    }


    // Create and present the photo editor. Make this class the delegate of it to handle export and cancelation.
    let photoEditViewController = PhotoEditViewController(photoAsset: photo, configuration: configuration)
    photoEditViewController.delegate = self
    photoEditViewController.modalPresentationStyle = .fullScreen
    presentingViewController?.present(photoEditViewController, animated: true, completion: nil)
  }


  // MARK: - PhotoEditViewControllerDelegate


  func photoEditViewControllerShouldStart(_ photoEditViewController: PhotoEditViewController, task: PhotoEditorTask) -> Bool {
    // Implementing this method is optional. You can perform additional validation and interrupt the process by returning `false`.
    true
  }


  func photoEditViewControllerDidFinish(_ photoEditViewController: PhotoEditViewController, result: PhotoEditorResult) {
    // The image has been exported successfully and is passed as an `Data` object in the `result.output.data`.
    // To create an `UIImage` from the output, use `UIImage(data:)`.
    // See other examples about how to save the resulting image.
    presentingViewController?.dismiss(animated: true, completion: nil)
  }


  func photoEditViewControllerDidFail(_ photoEditViewController: PhotoEditViewController, error: PhotoEditorError) {
    // There was an error generating the photo.
    print(error.localizedDescription)
    // Dismissing the editor.
    presentingViewController?.dismiss(animated: true, completion: nil)
  }


  func photoEditViewControllerDidCancel(_ photoEditViewController: PhotoEditViewController) {
    // The user tapped on the cancel button within the editor. Dismissing the editor.
    presentingViewController?.dismiss(animated: true, completion: nil)
  }
}