Theme Configs

The themeConfigs object customizes the appearance of the SDK’s user interface (UI), allowing you to align it with your brand’s design guidelines. Below is a detailed breakdown of each parameter.

Parameter	Type	Required	Description
primaryButtonBgColor	string	No	Background color of the primary action buttons.
primaryButtonBorderColor	string	No	Border color of the primary action buttons.
primaryButtonHoverBgColor	string	No	Background color of the primary buttons when hovered over.
primaryButtonTextColor	string	No	Text color of the primary action buttons.
primaryButtonHoverTextColor	string	No	Text color of the primary buttons when hovered over.
primaryButtonBorderRadius	string	No	Border radius of the primary action buttons. Accepts CSS values (e.g., 5px, 50% for rounded buttons).
secondaryButtonBgColor	string	No	Background color of the secondary action buttons.
secondaryButtonBorderColor	string	No	Border color of the secondary action buttons.
secondaryButtonHoverBgColor	string	No	Background color of the secondary buttons when hovered over.
secondaryButtonTextColor	string	No	Text color of the secondary action buttons.
secondaryButtonHoverTextColor	string	No	Text color of the secondary buttons when hovered over.
secondaryButtonBorderRadius	string	No	Border radius of the secondary action buttons.
titleTextColor	string	No	Color of the text used in titles across the SDK.
titleTextFontSize	string	No	Font size of the text used in titles. Accepts CSS values (e.g., 16px, 1em).
descriptionTextColor	string	No	Color of the text used in descriptions.
descriptionFontSize	string	No	Font size of the text used in descriptions.
bodyTextColor	string	No	Color of the text used in the main body content.
bodyTextFontSize	string	No	Font size of the text used in the main body content.
fontFamily	string	No	Font family for all text in the SDK (e.g., "Arial, sans-serif").
fontFamilyUrl	string	No	URL of the font to be loaded (useful for custom web fonts).
loadingSpinnerColor	string	No	Color of the loading spinner animation.
cameraFrameBorderInitialColor	string	No	Initial border color of the camera frame overlay.
cameraFrameBorderAnimationColor	string	No	Border color of the camera frame overlay during animations (e.g., selfie capture).
backButtonColor	string	No	Color of the back button in the SDK screens.
modalCloseButtonColor	string	No	Color of the close button in modal dialogs.
sessionIdFontSize	string	No	Font size of the session ID text.
backgroundColor	string	No	Background color for the entire SDK interface.
errorTextColor	string	No	Font color for error text
cameraInstructionBgColor	string	No	Background color for camera feedback instruction during doc/selfie capture
cameraInstructionTextColor	string	string	Text color for camera feedback instruction during doc/selfie capture
cameraInstructionHighlightColor	string	string	color for the highlighted part of camera feedback instruction during capture

For all color-related parameters in the themeConfigs, you can use any valid CSS color format, including:

• Hexadecimal: #007bff, #ffffff, etc.

• RGB: rgb(0, 123, 255), rgb(255, 255, 255), etc.

• Named Colors: red, blue, green, etc. An example theme config

themeConfigs: {
  primaryButtonBgColor: "#007bff",
  primaryButtonBorderColor: "#0056b3",
  primaryButtonHoverBgColor: "#0056b3",
  primaryButtonTextColor: "#ffffff",
  primaryButtonHoverTextColor: "#e0e0e0",
  primaryButtonBorderRadius: "5px",
  secondaryButtonBgColor: "#f8f9fa",
  secondaryButtonBorderColor: "#ced4da",
  secondaryButtonHoverBgColor: "#e9ecef",
  secondaryButtonTextColor: "#495057",
  secondaryButtonHoverTextColor: "#212529",
  secondaryButtonBorderRadius: "5px",
  titleTextColor: "#343a40",
  titleTextFontSize: "18px",
  descriptionTextColor: "#6c757d",
  descriptionFontSize: "14px",
  bodyTextColor: "#212529",
  bodyTextFontSize: "14px",
  fontFamily: "'Roboto', sans-serif",
  fontFamilyUrl: "https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap",
  loadingSpinnerColor: "#007bff",
  cameraFrameBorderInitialColor: "#28a745",
  cameraFrameBorderAnimationColor: "#dc3545",
  cameraFrameOverlayColor: "rgba(0, 0, 0, 0.5)",
  cameraErrorAlertBgColor: "#ffc107",
  cameraErrorAlertTextColor: "#212529",
  backButtonColor: "#007bff",
  modalCloseButtonColor: "#6c757d",
  backgroundColor: "white",
}