Theme Overview

Align Critical Moments UI to your brand and app's style

Themes control the style, colors and font of the Critical Moments UI. By specifying themes, you can align our UI to match the rest of your app, and fit in seamlessly.

Three modals using different themes

Themes Configuration Example

Themes are defined in your config file.

A top level themes object contains a defaultThemeName string and a namedThemes map/object, with subitems.

• defaultThemeName [optional] defines a default theme. If can be one of the namedThemes names, or one of the built in theme names:

• namedThemes [optional] define custom themes which can be referenced by name from invividual actions, used as a fallback theme, or set as the defaultThemeName. See Custom Theme Config for details on how to create your own theme.

The Critical Moments Demo App can be used to experiment with themes.

Here's an example theme config specifying one custom theme, and setting it as the default via defaultThemeName:

"themes": {
    "defaultThemeName": "blackAndWhiteTheme",
    "namedThemes": {
        "blackAndWhiteTheme": {
            "bannerBackgroundColor": "#000000",
            "bannerForegroundColor": "#ffffff",
            "fontName": "AvenirNext-Regular",
            "boldFontName": "AvenirNext-Bold",
            "backgroundColor": "#ffffff",
            "primaryTextColor": "#000000",
            "primaryColor": "#da1212",
            "secondaryTextColor": "#424242",
            "darkModeTheme": {
                "bannerBackgroundColor": "#ffffff",
                "bannerForegroundColor": "#000000",
                "fontName": "AvenirNext-Regular",
                "boldFontName": "AvenirNext-Bold",
                "backgroundColor": "#000000",
                "primaryTextColor": "#ffffff",
                "primaryColor": "#da1212",
                "secondaryTextColor": "#a1a1a1"
            }
        }
    }
}

Custom Theme Spec

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.