Skip to main content
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.

Fonts#

The theme also allows changing the fonts that are used in the editor. The SDK uses four major font types:

  • The primaryFont
  • The mediumFont
  • The boldFont
  • The monospacedFont

The sizes of the fonts are automatically set via the SDK. If you need to update the individual font sizes, you can adjust these via UIAppearanceProxy calls for each of the components.

Toolbar Titles#

By default, all titles in the toolbar are uppercased. To disable this, you can set the Theme.uppercasedToolbarTitles to false.

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 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.