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 {
"preferred_theme" : "default" ,
"theme" : {
"light" : {
"primary_color" : "#1054DE" ,
"secondary_color" : "#292B32" ,
"base_color" : "#292b32" ,
"base_shade1_color" : "#636878" ,
"base_shade2_color" : "#898e9e" ,
"base_shade3_color" : "#a5a9b5" ,
"base_shade4_color" : "#ebecef" ,
"alert_color" : "#FA4D30" ,
"background_color" : "#FFFFFF" ,
} ,
"dark" : {
"primary_color" : "#1054DE" ,
"secondary_color" : "#292B32" ,
"base_color" : "#ebecef" ,
"base_shade1_color" : "#a5a9b5" ,
"base_shade2_color" : "#6e7487" ,
"base_shade3_color" : "#40434e" ,
"base_shade4_color" : "#292b32" ,
"alert_color" : "#FA4D30" ,
"background_color" : "#191919" ,
}
} ,
"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" ,
"theme" : {
"light" : {
"primary_color" : "#1054DE" ,
"secondary_color" : "#292B32" ,
"base_color" : "#292b32" ,
"base_shade1_color" : "#636878" ,
"base_shade2_color" : "#898e9e" ,
"base_shade3_color" : "#a5a9b5" ,
"base_shade4_color" : "#ebecef" ,
"alert_color" : "#FA4D30" ,
"background_color" : "#FFFFFF" ,
} ,
"dark" : {
"primary_color" : "#1054DE" ,
"secondary_color" : "#292B32" ,
"base_color" : "#ebecef" ,
"base_shade1_color" : "#a5a9b5" ,
"base_shade2_color" : "#6e7487" ,
"base_shade3_color" : "#40434e" ,
"base_shade4_color" : "#292b32" ,
"alert_color" : "#FA4D30" ,
"background_color" : "#191919" ,
}
}
} ,
"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/*" : {
} ,
"*/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/*" : {
"theme" : {
"light" : {
"primary_color" : "#1054DE" ,
"secondary_color" : "#292B32" ,
"base_color" : "#292b32" ,
"base_shade1_color" : "#636878" ,
"base_shade2_color" : "#898e9e" ,
"base_shade3_color" : "#a5a9b5" ,
"base_shade4_color" : "#ebecef" ,
"alert_color" : "#FA4D30" ,
"background_color" : "#FFFFFF" ,
} ,
"dark" : {
"primary_color" : "#1054DE" ,
"secondary_color" : "#292B32" ,
"base_color" : "#ebecef" ,
"base_shade1_color" : "#a5a9b5" ,
"base_shade2_color" : "#6e7487" ,
"base_shade3_color" : "#40434e" ,
"base_shade4_color" : "#292b32" ,
"alert_color" : "#FA4D30" ,
"background_color" : "#191919" ,
}
}
} ,
"*/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/*" : {
"theme" : {
"light" : {
"primary_color" : "#1054DE" ,
"secondary_color" : "#292B32" ,
"base_color" : "#292b32" ,
"base_shade1_color" : "#636878" ,
"base_shade2_color" : "#898e9e" ,
"base_shade3_color" : "#a5a9b5" ,
"base_shade4_color" : "#ebecef" ,
"alert_color" : "#FA4D30" ,
"background_color" : "#FFFFFF" ,
} ,
"dark" : {
"primary_color" : "#1054DE" ,
"secondary_color" : "#292B32" ,
"base_color" : "#ebecef" ,
"base_shade1_color" : "#a5a9b5" ,
"base_shade2_color" : "#6e7487" ,
"base_shade3_color" : "#40434e" ,
"base_shade4_color" : "#292b32" ,
"alert_color" : "#FA4D30" ,
"background_color" : "#191919" ,
}
}
} ,
"*/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
Applying theme to application
UIKit will support preferred_theme property in configuration.
default
respects the device settings.
light
forcefully set light theme regardless of device settings.
dark
forcefully set dark theme regardless of device settings.
Copy "preferred_theme" : "default"
Available color properties in Light and Dark theme
We support light
and dark
theme, you can modify primary, secondary, base and shaded colors, alert and background colors for your app theme.
primary
- primary color for the app, used for action button and highlighted text.
secondary
- secondary color for the app, used for border and secondary action button.
base
- used as primary text color in title, label and body.
base_shade1
- used as secondary text color in description, slightly lighter than base
color in light
theme and slightly dimmer than base
color in dark
theme.
base_shade2
- used as tertiary text color in secondary description, inactive and hint text, slightly lighter than base_shade1
color in light
theme and slightly dimmer than base_shade1
color in dark
theme.
base_shade3
- used as disabled text color, slightly lighter than base_shade2
color in light
theme and slightly dimmer than base_shade2
color in dark
theme.
base_shade4
- optional, slightly lighter than base_shade3
color in light
theme and slightly dimmer than base_shade3
color in dark
theme.
alert
- used for error button and text.
background
- used for background color of the page or component.
Copy "theme" : {
"light" : {
"primary_color" : "#1054DE" ,
"secondary_color" : "#292B32" ,
"base_color" : "#292b32" ,
"base_shade1_color" : "#636878" ,
"base_shade2_color" : "#898e9e" ,
"base_shade3_color" : "#a5a9b5" ,
"base_shade4_color" : "#ebecef" ,
"alert_color" : "#FA4D30" ,
"background_color" : "#FFFFFF" ,
} ,
"dark" : {
"primary_color" : "#1054DE" ,
"secondary_color" : "#292B32" ,
"base_color" : "#ebecef" ,
"base_shade1_color" : "#a5a9b5" ,
"base_shade2_color" : "#6e7487" ,
"base_shade3_color" : "#40434e" ,
"base_shade4_color" : "#292b32" ,
"alert_color" : "#FA4D30" ,
"background_color" : "#191919" ,
}
}
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/*/*" : {
"theme" : {
"light" : {
"primary_color" : "#1054DE" ,
"secondary_color" : "#292B32" ,
"base_color" : "#292b32" ,
"base_shade1_color" : "#636878" ,
"base_shade2_color" : "#898e9e" ,
"base_shade3_color" : "#a5a9b5" ,
"base_shade4_color" : "#ebecef" ,
"alert_color" : "#FA4D30" ,
"background_color" : "#FFFFFF" ,
} ,
"dark" : {
"primary_color" : "#1054DE" ,
"secondary_color" : "#292B32" ,
"base_color" : "#ebecef" ,
"base_shade1_color" : "#a5a9b5" ,
"base_shade2_color" : "#6e7487" ,
"base_shade3_color" : "#40434e" ,
"base_shade4_color" : "#292b32" ,
"alert_color" : "#FA4D30" ,
"background_color" : "#191919" ,
}
}
}
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/*" : {
"theme" : {
"light" : {
"primary_color" : "#1054DE" ,
"secondary_color" : "#292B32" ,
"base_color" : "#292b32" ,
"base_shade1_color" : "#636878" ,
"base_shade2_color" : "#898e9e" ,
"base_shade3_color" : "#a5a9b5" ,
"base_shade4_color" : "#ebecef" ,
"alert_color" : "#FA4D30" ,
"background_color" : "#FFFFFF" ,
} ,
"dark" : {
"primary_color" : "#1054DE" ,
"secondary_color" : "#292B32" ,
"base_color" : "#ebecef" ,
"base_shade1_color" : "#a5a9b5" ,
"base_shade2_color" : "#6e7487" ,
"base_shade3_color" : "#40434e" ,
"base_shade4_color" : "#292b32" ,
"alert_color" : "#FA4D30" ,
"background_color" : "#191919" ,
}
}
}
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"
]