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
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.
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 thanbase
color inlight
theme and slightly dimmer thanbase
color indark
theme.base_shade2
- used as tertiary text color in secondary description, inactive and hint text, slightly lighter thanbase_shade1
color inlight
theme and slightly dimmer thanbase_shade1
color indark
theme.base_shade3
- used as disabled text color, slightly lighter thanbase_shade2
color inlight
theme and slightly dimmer thanbase_shade2
color indark
theme.base_shade4
- optional, slightly lighter thanbase_shade3
color inlight
theme and slightly dimmer thanbase_shade3
color indark
theme.alert
- used for error button and text.background
- used for background color of the page or component.
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
Last updated