Theming

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