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

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 system_dark as default theme, and defining one custom theme for use in specific actions (which can reference it by name):

"themes": {
    "defaultThemeName": "system_dark",
    "namedThemes": {
        "blackAndWhiteTheme": {
            "bannerBackgroundColor": "#000000",
            "bannerForegroundColor": "#ffffff",
            "fontScale": 1.1,
            "fontName": "AvenirNext-Regular",
            "boldFontName": "AvenirNext-Bold",
            "scaleFontForUserPreference": false,
            "darkModeTheme": {
                "bannerBackgroundColor": "#ffffff",
                "bannerForegroundColor": "#000000",
                "fontScale": 1.1,
                "fontName": "AvenirNext-Regular",
                "boldFontName": "AvenirNext-Bold",
                "scaleFontForUserPreference": false
            }
        }
    }
}