Onfido UI Customization

The Onfido component supports language and UI customization through the language and customUI parameters.

• language: Customize the language displayed on the SDK by passing a string for the supported languages or object. The following languages are supported: en_US, de_DE, es_ES, fr_FR, it_IT, pt_PT, nl_NL.
  For unsupported languages, send an object containing local string, a local tag and phrases, and an object containing the keys you want to override. For example:
  Copy

  {
       locale: 'en_US',
       phrases: {
        "welcome": {
          "next_button": "Select document",
          "subtitle": "This will take a few minutes.",
          "title": "Validate identity."
        }
       } 
      }

• customUI: Customize text, the SDK main container, buttons, links, icon background color, and pop-ups by using the following properties:
  Copy

  // Typography
      fontFamilyTitle: string;
      ontFamilySubtitle: string;
      ontFamilyBody: string;
      fontSizeTitle: string;
      fontSizeSubtitle: string;
      fontSizeBody: string;
      fontWeightTitle: string;
      fontWeightSubtitle: string;
      fontWeightBody: string;
      colorContentTitle: string;
      colorContentSubtitle: string;
      colorContentBody: string;
      // Modal
      colorBackgroundSurfaceModal: string;
      colorBorderSurfaceModal: string;
      borderWidthSurfaceModal: string;
      borderStyleSurfaceModal: string;
      borderRadiusSurfaceModal: string;
      // Buttons
      colorContentButtonPrimaryText: string;
      colorBackgroundButtonPrimary: string;
      colorBackgroundButtonPrimaryHover: string;
      colorBackgroundButtonPrimaryActive: string;
      colorBorderButtonPrimary: string;
      colorContentButtonSecondaryText: string;
      colorBackgroundButtonSecondary: string;
      colorBackgroundButtonSecondaryHover: string;
      colorBackgroundButtonSecondaryActive: string;
      colorBorderButtonSecondary: string;
      colorContentDocTypeButton: string;
      colorBackgroundDocTypeButton: string;
      colorBorderDocTypeButton: string;
      colorBorderDocTypeButtonHover: string;
      colorBorderDocTypeButtonActive: string;
      colorBackgroundIcon: string;
      // Shared Buttons
      borderRadiusButton: string;
      buttonGroupStacked: boolean;
      // Links
      colorContentLinkTextHover: string;
      colorBorderLinkUnderline: string;
      colorBackgroundLinkHover: string;
      colorBackgroundLinkActive: string;
      // Warning Popups
      colorContentAlertInfo: string;
      colorBackgroundAlertInfo: string;
      colorContentAlertInfoLinkHover: string;
      colorContentAlertInfoLinkActive: string;
      // Error Popups
      colorContentAlertError: string;
      colorBackgroundAlertError: string;
      colorContentAlertErrorLinkHover: string;
      colorContentAlertErrorLinkActive: string;
      // Info Header/Highlight Pills    
      colorBackgroundInfoPill: string;
      colorContentInfoPill: string;
      // Icon Buttons
      colorBackgroundButtonIconHover: string;
      colorBackgroundButtonIconActive: string;
      // Camera Shutter Button
      colorBackgroundButtonCameraHover: string;
      colorBackgroundButtonCameraActive: string;