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.
Copy {
"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"
}
}
} Global Theme
Currently we only supports light_theme, you can modify primary_color or secondary_color for app theme.
Copy "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
Copy "camera_page/*/*": {
"page_theme": {
"light_theme": {
"primary_color": "#000000",
"secondary_color": "#123456"
}
}
} Allowed Page IDs
These are the available Page IDs
Copy "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
Copy "*/edit_comment_component/*": {
"component_theme": {
"light_theme": {
"primary_color": "#1D1234",
"secondary_color": "#AB1234"
}
}
} Allowed Component IDs
These are the available Component IDs
Copy "*/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.
Copy "create_story_page/*/aspect_ratio_button": {
"aspect_ratio_icon": "aspect_ratio.png",
"background_color": "#80000000"
} Allowed Component IDs
These are the available Component IDs
Copy "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
Copy "excludes": [
"create_story_page/*/aspect_ratio_button"
]