Customize the theme & UI

Our mobile SDKs allow changing the theme color that is used for borders and buttons, the links color and the background color. We try to match the native platform UIs.

Further customization of the consent notice can be done by displaying your own custom consent notice instead of the standard SDK notice.

The Android TV / tvOS themes are not customizable at the moment. TV devices will ignore these parameters.

Colors

You can modify the theme colors in your didomi_config.json file.

The theme color attribute is used for borders of notices and popups and for highlighted buttons.

{
  "theme": {
    "color": "#000000"
  }
}

The theme linkColor attribute controls the color of all the links in the banner/popup.

{
  "theme": {
    "linkColor": "#000000"
  }
}

The theme backgroundColor attribute controls the color of all the screens from the SDK.

{
  "theme": {
    "backgroundColor": "#000000"
  }
}

The text and some graphical elements colors will be computed from the background color in order to ensure sufficient color contrast. The default background color is white (#FFFFFF).

Buttons

We use two different types of buttons:

Regular buttons (regularButtons): our basic button used throughout the consent workflow (Learn More, Disagree, etc.). Those buttons are grey by default.
Highlighted buttons (highlightButtons): used when we want to emphasize an action. Those buttons use the theme color by default.

Only integer values are currently supported for the width and radius.

Older Android SDK versions had an issue where border and corner radius sizes were used as raw pixels instead of density-independent pixels (dp). In order to stay backward-compatible with existing configurations, the fix is under a feature flag: set sizesInDp to true to use it.

  "theme": {
    "buttons": {
      "regularButtons": { // Learn more/disagree/disagree to all buttons.
        "backgroundColor": "#eeeeee",
        "textColor": "#999999",
        "borderColor": "#222222",
        "borderWidth": "1",
        "borderRadius": "3",
        "sizesInDp": true
      },
      "highlightButtons": { // Agree/save/agree to all buttons.
        "backgroundColor": "#c2272d",
        "textColor": "#ffffff",
        "borderColor": "#c2272d",
        "borderWidth": "1",
        "borderRadius": "3",
        "sizesInDp": true
      }
    }
  }
}

Notice text

You can customize the text colors, sizes and alignments for the notice title and description.

The default text alignment is start. The default text color is computed from the background color (black or white). The default text size for Notice's title is 24px. The default text size for Notice's description is 16px.

You can customize the notice globally, apply the same changes to the notice title and description:

"theme": {
    "notice": {
        "alignment": "justify", // start|end|center|justify
        "textColor": "#0000cc", // hexadecimal color
        "textSize": 16, // Size in px
    }
}

You can customize the notice title and description independently, apply the different changes to the notice title and description:

"theme": {
    "notice": {
        "descriptionAlignment": "justify", // start|end|center|justify
        "descriptionTextColor": "#0000cc", // hexadecimal color
        "descriptionTextSize": 16, // Size in px
        
        "titleAlignment": "center", // start|end|center|justify
        "titleTextColor": "#ff0000", // hexadecimal color
        "titleTextSize": 24 // Size in pt (iOS) or sp (Android)
    }
}

You can mix global and specific parameters. Per example, the specific parameter descriptionAlignment will override the global parameter alignment.

Preferences text

You can customize the text colors, text sizes and alignments for the preferences title and description.

The customization of the preferences' title applies only to the vendor sub-title (Select partners in english).

The customization of the preferences's description applies to the purposes and vendors descriptions.

The default text alignment is start. The default text color is computed from the background color (black or white). The default text size for Preferences' title is 18px. The default text size for Preferences' description is 16px.

You can customize the notice globally, apply the same changes to the notice title and description:

"theme": {
    "preferences": {
        "alignment": "justify", // start|end|center|justify
        "textColor": "#0000cc", // hexadecimal color
        "textSize": 16, // Size in px
    }
}

You can customize the notice title and description independently, apply the different changes to the preferences title and description:

"theme": {
    "preferences": {
        "descriptionAlignment": "justify", // start|end|center|justify
        "descriptionTextColor": "#0000cc", // hexadecimal color
        "descriptionTextSize": 16, // Size in px
        
        "titleAlignment": "center", // start|end|center|justify
        "titleTextColor": "#ff0000", // hexadecimal color
        "titleTextSize": 18 // Size in pt (iOS) or sp (Android)
    }
}

Custom Font Family

We provide the capacity to customize the font family for the notice and the preferences titles and descriptions. In order to do so, you will need to add the font to your application then provide its name with a custom json parameter

Add a font for Android

See Android documentation

Note that Android does provide some fonts depending on the API version. In order to make the font available to all supported API versions, you must add the font manually. Android will need only the "regular" font file to handle the font weight and / or style (<b>, <i>).

Android resources files must not contains any uppercase characters or spaces, on order to manage custom fonts for Android and iOS from a single configuration file, you need to follow this name convention for the resource file: replace space chars by underscore chars and put the file name in lower case.

Examples: Font family name: Trebuchet MS -> Resource file name: trebuchet_msFont family name: Arial -> Resource file name: arial

Add a font for iOS

See Apple Documentation

Note that iOS is already providing many fonts ready to use from your application. If you want to use a system provided font, you can skip this part. iOS will need one font file for each variant (regular bold, bold+italic, italic). The variants are only required if you need to add html tags to change the font weight and / or style (<b>, <i>).

Since iOS is using the font family name, the font file name doesn't matter.

Examples: Font family name: Trebuchet MS -> Same as the Font Family Name from Font Book or from the iOS system. Font family name: Arial -> Same as the Font Family Name from Font Book or from the iOS system.

Custom json from the console

You need to set the font family name for the title and/or description for the notice screen and the preferences screens.

You can apply a font family to all UI buttons (title, descriptions and buttons) displayed in the notice and preferences using theme.notice.fontFamily and theme.preferences.fontFamily:

"theme": {
        ...
        "notice": {
            ...
            "fontFamily": "Trebuchet MS" // Custom font family for notice title, descriptions and buttons
        },
        "preferences": {
            ...
            "fontFamily": "Trebuchet MS" // Custom font family for preferences title, descriptions and buttons
        }
    }

You can use the titleFontFamily and descriptionFontFamily properties to set a font family for the notice and preferences as shown below. These changes will have no effect on buttons:

"theme": {
        ...
        "notice": {
            ...
            "descriptionFontFamily": "Trebuchet MS", // Custom font family for notice description
            ...
            "titleFontFamily": "Trebuchet MS" // Custom font family for notice title
        },
        "preferences": {
            ...
            "descriptionFontFamily": "Trebuchet MS", // Custom font family for preferences descriptions
            ...
            "titleFontFamily": "Trebuchet MS" // Custom font family for preferences title
        }
    }

You can mix global and specific parameters. Per example, the specific parameter descriptionFontFamily will override the global parameter fontFamily.

You can mix global and specific parameters. Per example, the specific parameter descriptionAlignment will override the global parameter alignment.

Fullscreen mode

You can set the notice and preferences screens to fit the device screen. This option will make the notice and the preferences screen to completely cover your application (only the system status bar will be visible). This mode will override the notice position parameter (bottom / popup).

"theme": {
    "fullscreen": true,
    ...
}

Sticky Buttons

You can enable the Agree and Disagree (button or link / cross) sticky buttons. When sticky buttons are enabled, they will always be visible, even if the notice text is too long to be displayed entirely in the notice. In this case the texts will be scrollable independently.

This feature will force the Fullscreen mode (and will override the notice position parameter).

The Agree and Disagree buttons will be disabled at startup. The user will have to scroll down to the bottom of the content description in order to enable those buttons.

"theme": {
    ...
    "notice": {
        "stickyButtons": true,
        ...
    }
}

Custom notice

If you want to further customize the notice in your app, you can use your own custom notice to replace the standard Didomi SDK notices (banner or popup). Contact [email protected] to learn more and discuss feasibility.

PreviousCustomize the preferences popup NextLoad notice by ID

Last updated 1 year ago