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.
.dynamic to the global theme property of the
Configuration object switches between the light and dark theme depending on the active
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
theme also allows changing the fonts that are used in the editor. The SDK uses four major font types:
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.
By default, all titles in the toolbar are uppercased. To disable this, you can set the
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
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.
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.