1 of 1

Customization Basics

Configuration file

Our UIKit v4 supports customization in a single place by modifying a config.json file in related UIKit repository. This configuration file includes all necessary data to customize the appearance of each pages, components and elements that we allow to do customization.

Global Theme

Currently we only supports light_theme, you can modify primary_color or secondary_color for app theme.

Configuration ID of Page, Component and Element

We supports three different levels - Page, Component and Element. The format is like page_id/component_id/element_id.

Page ID - We use post suffix and placed at first, it will looks like camera_page/*/*

Component ID - We use component suffix and placed at middle, it will looks like */comment_component/*

Element ID - We use no suffix and placed at last, it will looks like */*/close_button

Customizing Page

You can override Global Theme for a specific page with desired value like below

Allowed Page IDs

These are the available Page IDs

Customizing Component

You can also override Global Theme for a specific component with desired value like below

Allowed Component IDs

These are the available Component IDs

Customizing Element

You can specify background_color for an element, and icon if that element has image icon.

Allowed Component IDs

These are the available Component IDs

Excluding page, component or element

You can exclude UI elements by specifying its config id in excludes in configuration file.

Example: Excluding aspect ratio button from Story Draft page

Customization Basics

Configuration file

Global Theme

Currently we only supports light_theme, you can modify primary_color or secondary_color for app theme.

"global_theme": {
  "light_theme": {
    "primary_color": "#FFFFFF",
    "secondary_color": "#AB1234"
  }
}

Configuration ID of Page, Component and Element

We supports three different levels - Page, Component and Element. The format is like page_id/component_id/element_id.

Page ID - We use post suffix and placed at first, it will looks like camera_page/*/*

Component ID - We use component suffix and placed at middle, it will looks like */comment_component/*

Element ID - We use no suffix and placed at last, it will looks like */*/close_button

Customizing Page

You can override Global Theme for a specific page with desired value like below

"camera_page/*/*": {
  "page_theme": {
    "light_theme": {
      "primary_color": "#000000",
      "secondary_color": "#123456"
    }
  }
}

Allowed Page IDs

These are the available Page IDs

"select_target_page/*/*"
"camera_page/*/*"
"creat_story_page/*/*"
"story_page/*/*"

Customizing Component

You can also override Global Theme for a specific component with desired value like below

"*/edit_comment_component/*": {
  "component_theme": {
    "light_theme": {
      "primary_color": "#1D1234",
      "secondary_color": "#AB1234"
    }
  }
}

Allowed Component IDs

These are the available Component IDs

"*/edit_comment_component/*"
"*/comment_tray_component/*"
"*/story_tab_component/*"

Customizing Element

You can specify background_color for an element, and icon if that element has image icon.

"create_story_page/*/aspect_ratio_button": {
    "aspect_ratio_icon": "aspect_ratio.png",
    "background_color": "#80000000"
}

Allowed Component IDs

These are the available Component IDs

"select_target_page/*/back_button"
"camera_page/*/close_button"
"create_story_page/*/back_button"
"create_story_page/*/aspect_ratio_button"
"create_story_page/*/story_hyperlink_button"
"create_story_page/*/hyper_link"
"create_story_page/*/share_story_button"
"story_page/*/progress_bar"
"story_page/*/overflow_menu"
"story_page/*/close_button"
"story_page/*/story_impression_button"
"story_page/*/story_comment_button"
"story_page/*/story_reaction_button"
"story_page/*/create_new_story_button"
"story_page/*/speaker_button"
"*/edit_comment_component/cancel_button"
"*/edit_comment_component/save_button"
"*/hyper_link_config_component/*"
"*/hyper_link_config_component/done_button"
"*/hyper_link_config_component/cancel_button"
"*/story_tab_component/story_ring"
"*/story_tab_component/create_new_story_button"
"*/*/close_button"

Excluding page, component or element

You can exclude UI elements by specifying its config id in excludes in configuration file.

Example: Excluding aspect ratio button from Story Draft page

"excludes": [
    "create_story_page/*/aspect_ratio_button"
]

{
  "global_theme": {
    "light_theme": {
      "primary_color": "#FFFFFF",
      "secondary_color": "#AB1234"
    }
  },
  "excludes": [
  ],
  "customizations": {
    "select_target_page/*/*": {
      "page_theme": {
        "light_theme": {
          "primary_color": "#1D1234",
          "secondary_color": "#AB1234"
        }
      },
      "title": "Share to"
    },
    "select_target_page/*/back_button": {
      "back_icon": "back.png"
    },
    "camera_page/*/*": {
      "resolution": "720p",
      "page_theme": {
        "light_theme": {
          "primary_color": "#000000",
          "secondary_color": "#AB1234"
        }
      }
    },
    "camera_page/*/close_button": {
      "close_icon": "close.png",
      "background_color": "#80000000"
    },
    "create_story_page/*/*": {},
    "create_story_page/*/back_button": {
      "back_icon": "back.png",
      "background_color": "#80000000"
    },
    "create_story_page/*/aspect_ratio_button": {
      "aspect_ratio_icon": "aspect_ratio.png",
      "background_color": "#80000000"
    },
    "create_story_page/*/story_hyperlink_button": {
      "hyperlink_button_icon": "hyperlink_button.png",
      "background_color": "#80000000"
    },
    "create_story_page/*/hyper_link": {
      "hyper_link_icon": "hyper_link.png",
      "background_color": "#80000000"
    },
    "create_story_page/*/share_story_button": {
      "share_icon": "share_story_button.png",
      "background_color": "#FFFFFF",
      "hide_avatar": false
    },
    "story_page/*/*": {},
    "story_page/*/progress_bar": {
      "progress_color": "#FFFFFF",
      "background_color": "#50FFFFFF"
    },
    "story_page/*/overflow_menu": {
      "overflow_menu_icon": "threeDot.png"
    },
    "story_page/*/close_button": {
      "close_icon": "close.png"
    },
    "story_page/*/story_impression_button": {
      "impression_icon": "impressionIcon.png"
    },
    "story_page/*/story_comment_button": {
      "comment_icon": "comment.png",
      "background_color": "#1234DD"
    },
    "story_page/*/story_reaction_button": {
      "reaction_icon": "like.png",
      "background_color": "#1243EE"
    },
    "story_page/*/create_new_story_button": {
      "create_new_story_icon": "plus.png",
      "background_color": "#1243EE"
    },
    "story_page/*/speaker_button": {
      "mute_icon": "mute.png",
      "unmute_icon": "unmute.png",
      "background_color": "#1243EE"
    },
    "*/edit_comment_component/*": {
      "component_theme": {
        "light_theme": {
          "primary_color": "#1D1234",
          "secondary_color": "#AB1234"
        }
      }
    },
    "*/edit_comment_component/cancel_button": {
      "cancel_icon": "",
      "cancel_button_text": "cancel",
      "background_color": "#1243EE"
    },
    "*/edit_comment_component/save_button": {
      "save_icon": "",
      "save_button_text": "Save",
      "background_color": "#1243EE"
    },
    "*/hyper_link_config_component/*": {
      "component_theme": {
        "light_theme": {
          "primary_color": "#1D1234",
          "secondary_color": "#AB1234"
        }
      }
    },
    "*/hyper_link_config_component/done_button": {
      "done_icon": "",
      "done_button_text": "Done",
      "background_color": "#1243EE"
    },
    "*/hyper_link_config_component/cancel_button": {
      "cancel_icon": "",
      "cancel_button_text": "Cancel"
    },
    "*/comment_tray_component/*": {
      "component_theme": {
        "light_theme": {
          "primary_color": "#1D1234",
          "secondary_color": "#AB1234"
        }
      }
    },
    "*/story_tab_component/*": {
    },
    "*/story_tab_component/story_ring": {
      "progress_color": [
        "#339AF9",
        "#78FA58"
      ],
      "background_color": [
        "#EBECEF"
      ]
    },
    "*/story_tab_component/create_new_story_button": {
      "create_new_story_icon": "plus.png",
      "background_color": "#1243EE"
    },
    "*/*/close_button": {
      "close_icon": "close.png"
    }
  }
}

"select_target_page/*/back_button"
"camera_page/*/close_button"
"create_story_page/*/back_button"
"create_story_page/*/aspect_ratio_button"
"create_story_page/*/story_hyperlink_button"
"create_story_page/*/hyper_link"
"create_story_page/*/share_story_button"
"story_page/*/progress_bar"
"story_page/*/overflow_menu"
"story_page/*/close_button"
"story_page/*/story_impression_button"
"story_page/*/story_comment_button"
"story_page/*/story_reaction_button"
"story_page/*/create_new_story_button"
"story_page/*/speaker_button"
"*/edit_comment_component/cancel_button"
"*/edit_comment_component/save_button"
"*/hyper_link_config_component/*"
"*/hyper_link_config_component/done_button"
"*/hyper_link_config_component/cancel_button"
"*/story_tab_component/story_ring"
"*/story_tab_component/create_new_story_button"
"*/*/close_button"