Interface
The user interface can be customized in various ways with increasing complexity.
Theming#
The recommend 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 which can be applied as follows:
let configuration = Configuration { builder inbuilder.theme = .light}
The color of specific UI elements can be customized at a central place by modifying the properties of the theme:
let configuration = Configuration { builder inbuilder.theme.backgroundColor = .darkGraybuilder.theme.menuBackgroundColor = .blackbuilder.theme.toolbarBackgroundColor = .blackbuilder.theme.primaryColor = .greenbuilder.theme.tintColor = .red}
Appearance proxies#
The theming itself makes heavy use of UIAppearance
proxies. The defined colors are applied to most UI elements via UIAppearance
proxies during the initialization of a CameraViewController
or a PhotoEditViewController
. If you need to use UIAppearance
proxies yourself you need to issue your calls after the initialization of a CameraViewController
or a PhotoEditViewController
in order to override the properties set by the theming.
Configuration precedence#
The editor UI is divided into different sections. Some members like menuBackgroundColor
can be set globally, and if needed locally.
That means, that if you set the theme.menuBackgroundColor
of the Configuration
to black, all tools have that menuBackgroundColor
,
unless you set another menuBackgroundColor
in the specific tool configuration.
The following image annotates the most common configuration members.
Please note that the background color of the toolbar,
which sits at the bottom, is set through a property of the PhotoEditViewController
or by theme.toolbarBackgroundColor
.
Modifying UI elements via closures takes precedence over the configuration of the theme or the custom use of UIAppearance
proxies.