> For the complete documentation index, see [llms.txt](https://docs.vida.id/identity-stack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vida.id/identity-stack/verify/kyc-web-sdk/customization/theme-configs.md).

# 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).                                               |
| `instructionIconColor`            | `string` | No       | Color of the icons used for instructions on tutorial screens.                                             |
| `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` | No       | Text color for camera feedback instruction during doc/selfie 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**

```json
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",
}
```