Custom Themes

Bring your own style

You can create your own style in the config file, and use it throughout your app. See an example in Theme Overview.

Custom Theme Config

A theme is specified through a set of variables:

Variables	Type	Example	Description
backgroundColor	string	"#ffffff"	The color used for the background of views. Should be a string of the hex color prefixed with #. Defaults to the system standard color (respecting dark mode).
primaryColor	string	"#ff0000"	The primary brand color. This is used for buttons, icons, links and more. Should be legible if used on top of backgroundColor. If you aren't setting a manual backgroundColor, check it is legible on the system's light and dark mode background. If nil, will use system standard behaviour. On iOS will inherit tint from at runtime from the app wide AccentColor (defaults to "system blue").
primaryTextColor	string	"#000000"	The color used for primary content labels. Defaults to the system standard color (respecting dark mode).
secondaryTextColor	string	"#111111"	The color used for secondary content labels. Defaults to the system standard color (respecting dark mode).
bannerBackgroundColor	string	"#ffffff"	The background color of banner messages. Should be a string of the hex color prefixed with #. Defaults to a yellow color suitable for banners.
bannerForegroundColor	string	"#ffffff"	The foreground color of banner messages. Should be a string of the hex color prefixed with #. Defaults to a black.
fontScale	float	1.1	Scales the font size for all CM UI controls. Defaults to 1.0. Useful if your app's style uses font sizes consistently smaller or larger than the system default sizes. Defaults to 1.0
fontName	string	"AvenirNext-Regular"	The default font to use. If nil, this theme will use the system font. Check out https://iosfontlist.com for options, or use your own app-installed font.
boldFontName	string	"AvenirNext-Bold"	The default font to use for bold text. If nil, this theme will use the system font. Check out https://iosfontlist.com for options, or use your own app-installed font.
scaleFontForUserPreference	bool	true	If true, will scale the font size based on the user settings in "Settings" app or control center. Defaults to true. Ideally leave this enabled for accessibility.
darkModeTheme	json object	see below	If specified, a theme to use if the user has enabled "dark mode" for UI in settings. This object has the same structure as the root theme object. If not set, we will use the root theme for both light and dark mode.
fallback	string	"oldTheme"	A theme name to fallback if this build does not support this theme. For future use, if the theme spec grows and you continue to use the same config file for older builds using prior SDK version.