Skip to main content
PESDK/Flutter/Guides/User Interface

Theming

Add your theme to customize the user interface

PhotoEditor SDK for Flutter provides full control over the colors used inside the editor. However, the implementation differs for each of the platforms:

iOS#

For iOS, you can use the dedicated configuration option to provide a Theme directly inside your Configuration which you pass into the PESDK.openEditor method.

final Configuration configuration = Configuration(
theme: ThemeOptions(Theme("CUSTOM_THEME",
primaryColor: Colors.white,
tintColor: const Color.fromARGB(255, 61, 92, 245),
toolbarBackgroundColor: const Color.fromARGB(255, 47, 51, 55),
menuBackgroundColor: const Color.fromARGB(255, 33, 39, 44),
backgroundColor: const Color.fromARGB(255, 18, 26, 33))));

Android#

Android does not support changing the theme at runtime. That said, you will need to provide the theme natively via an XML file. Therefore, you can just add a custom style inside your android/app/src/main/res/values/styles.xml file or create a new XML file in that directory where you'll be able to override the available colors. For a detailed look at the available theme presets and available colors on Android, please refer to our native guides.

WARNING: The name of your custom style needs to be matching the identifier you provide inside the configuration.theme.theme - in this case CUSTOM_THEME.

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Theme for IMG.LY editors. -->
<style name="CUSTOM_THEME" parent="Theme.Imgly">
<item name="imgly_background_color">#121A21</item>
<item name="imgly_optionToolBar_background_color">#21272C</item>
<item name="imgly_actionBar_background_color">#2F3337</item>
<item name="imgly_highlight_color">#3D5CF5</item>
</style>
</resources>