Skip to main content
PESDK/React Native/Guides/User Interface

Theming

Add your theme to customize the user interface

PhotoEditor SDK for React Native 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.

const configuration: Configuration = {
  // Activate one of your themes.
  theme: 'light',
  custom: {
    // Provide all available themes.
    themes: {
      light: {
        toolbarBackground: '#ffffff',
        menuBackground: '#f7f7f7',
        background: '#ebebeb',
      },
    },
  },
};

Android#

Android does not support changing the theme at runtime. That said, you will need to provide the theme natively via an XML file. To that end create a imgly_color.xml file inside your android/app/src/main/res/values directory where you'll be able to override the available colors:

<resources>
    <color name="imgly_transparent_color">#00000000</color>
    <color name="imgly_background_color">#EBEBEB</color>
    <color name="imgly_camera_header_background_color">#27000000</color>
    <color name="imgly_camera_footer_background_color">#27000000</color>
    <color name="imgly_highlight_color">#FF1B77FF</color>
    <color name="imgly_icon_border_color_active">#FF1B77FF</color>
    <color name="imgly_slider_track_color_progress">#FF1B77FF</color>
    <color name="imgly_text_color">#FF000000</color>
    <color name="imgly_editor_text_color">#FF000000</color>
    <color name="imgly_camera_text_color">#FFFFFFFF</color>
    <color name="imgly_text_color_active">#FF000000</color>
    <color name="imgly_sprite_handle_thumb_color">#FFFFFFFF</color>
    <color name="imgly_text_on_image_color">#FFFFFFFF</color>
    <color name="imgly_icon_color_active">#FF000000</color>
    <color name="imgly_shuffle_icon_color">#FF000000</color>
    <color name="imgly_text_on_image_color_secondary">#99FFFFFF</color>
    <color name="imgly_button_color">#00000000</color>
    <color name="imgly_button_color_pressed">#FF203E61</color>
    <color name="imgly_button_color_disabled">#CCCCCCCC</color>
    <color name="imgly_icon_color">#CC000000</color>
    <color name="imgly_editor_text_color_secondary">#99000000</color>
    <color name="imgly_slider_thumb_color_disabled">#66000000</color>
    <color name="imgly_icon_color_disabled">#66000000</color>
    <color name="imgly_crop_icon_fill_color_active">#33000000</color>
    <color name="imgly_crop_icon_fill_color">#29000000</color>
    <color name="imgly_slider_track_color">#99000000</color>
    <color name="imgly_text_input_background_color">#D9000000</color>
    <color name="imgly_sticker_selection_background_color">#D9000000</color>
    <color name="imgly_actionBar_background_color">#FFFFFF</color>
    <color name="imgly_optionToolBar_background_color">#F7F7F7</color>
    <color name="imgly_slider_thumb_color">#FFE3E3E3</color>
    <color name="imgly_slider_background_color">#FFE3E3E3</color>
    <color name="imgly_quickOptionToolBar_background_color">#4D000000</color>
    <color name="imgly_dialog_background_color">#DDE3E3E3</color>
    <color name="imgly_shuffle_icon_overlay_color">#DDE3E3E3</color>
    <color name="imgly_text_on_image_background_color">#99000000</color>
    <color name="imgly_sprite_handle_line_color">#80FFFFFF</color>
    <color name="imgly_brush_preview_background_color">#DD1C1C1C</color>
    <color name="imgly_icon_color_on_canvas">#FFFFFFFF</color>
    <color name="imgly_icon_color_on_canvas_disabled">#66FFFFFF</color>
    <color name="imgly_icon_color_secondary">#99000000</color>
    <color name="imgly_camera_background_color">#FF000000</color>
    <color name="imgly_camera_icon_color">#CCFFFFFF</color>
    <color name="imgly_transform_background_color">#80000000</color>
</resources>