> For the complete documentation index, see [llms.txt](https://docs.caf.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.caf.io/caf-sdk/web-javascript/getting-started/document-detector/sdk-builder-options/appearance.md).

# Appearance

Here is a list of all parameters that are accepted in the **appearance** object present in the Document Detector options.

**Enhanced in v6.8.3:** The appearance configuration now uses a nested object format for better organization and readability.

<table data-header-hidden><thead><tr><th width="468"></th><th></th></tr></thead><tbody><tr><td><strong>Parameter</strong></td><td><strong>Type</strong></td></tr><tr><td><p><strong><code>general</code></strong></p><p>General appearance customizations for the SDK.</p></td><td><a href="#cx6h36ldsc3o">General</a></td></tr><tr><td><p><strong><code>capture</code></strong></p><p>Appearance customizations for "manual" and "automatic" capture modes.</p></td><td><a href="#id-8d8wujh5vkqn">Capture</a></td></tr><tr><td><p><strong><code>upload</code></strong></p><p>Appearance customizations for "upload" capture mode.</p></td><td><a href="#cy8sf4ohycir">Upload</a></td></tr></tbody></table>

## Configuration Format <a href="#configuration_format" id="configuration_format"></a>

The appearance options use a **nested object format** for better organization:

```javascript
appearance: {
  general: {
    fontFamily: "arial",
    closeButtonIconColor: "#FFFFFF"
  },
  capture: {
    captureButtonIconSize: "100%",
    captureButtonColor: "#FFFFFF",
    hideCaptureTitle: false
  },
  upload: {
    backgroundColor: "#BDBDBD",
    card: {
      backgroundColor: "#FFFFFF"
    },
    startScreen: {
      title: { color: "#323232" },
      details: { color: "#828282" },
      allowButton: {
        backgroundColor: "#323232",
        label: { color: "#FFFFFF" }
      }
    }
  }
}
```

{% hint style="info" %}
If you're upgrading from a previous version, your existing dot notation configurations (e.g., `"general.fontFamily": "arial"`) will continue to work, but we recommend migrating to the nested object format shown above.
{% endhint %}

## General <a href="#cx6h36ldsc3o" id="cx6h36ldsc3o"></a>

<table data-header-hidden><thead><tr><th width="468"></th><th></th><th></th></tr></thead><tbody><tr><td><strong>Parameter</strong></td><td><strong>Type</strong></td><td><strong>Default Value</strong></td></tr><tr><td><p><strong><code>fontFamily</code></strong></p><p>Changes the font for all elements contained in the SDK.</p><p><strong>Example:</strong> <code>general: { fontFamily: "arial" }</code></p></td><td>string</td><td>The font family is inherited from the page.</td></tr><tr><td><p><strong><code>closeButtonIconColor</code></strong></p><p>Close SDK button icon color customization.</p><p><strong>Example:</strong> <code>general: { closeButtonIconColor: "red" }</code></p></td><td>string</td><td><strong><code>"#fff"</code></strong></td></tr></tbody></table>

## Capture <a href="#id-8d8wujh5vkqn" id="id-8d8wujh5vkqn"></a>

<table data-header-hidden><thead><tr><th width="468"></th><th></th><th></th></tr></thead><tbody><tr><td><strong>Parameter</strong></td><td><strong>Type</strong></td><td><strong>Default Value</strong></td></tr><tr><td><p><strong><code>captureButtonIcon</code></strong></p><p>Capture icon source customization.</p><p>Options: image URL or base64 SVG.</p><p><strong>Example:</strong> <code>capture: { captureButtonIcon: "url" }</code></p></td><td>string</td><td>The default capture button icon is used.</td></tr><tr><td><p><strong><code>captureButtonIconSize</code></strong></p><p>Capture icon size customization.</p><p><strong>Example:</strong> <code>capture: { captureButtonIconSize: "50%" }</code></p></td><td>string</td><td><strong><code>"100%"</code></strong></td></tr><tr><td><p><strong><code>captureButtonColor</code></strong></p><p>Capture button color customization.</p><p><strong>Example:</strong> <code>capture: { captureButtonColor: "green" }</code></p></td><td>string</td><td><strong><code>"#fff"</code></strong></td></tr><tr><td><p><strong><code>hideCaptureTitle</code></strong></p><p>Hides the capture title.</p><p><strong>Example:</strong> <code>capture: { hideCaptureTitle: true }</code></p></td><td>boolean</td><td><strong><code>false</code></strong></td></tr></tbody></table>

## Upload <a href="#cy8sf4ohycir" id="cy8sf4ohycir"></a>

<table data-header-hidden><thead><tr><th width="468"></th><th></th><th></th></tr></thead><tbody><tr><td><strong>Parameter</strong></td><td><strong>Type</strong></td><td><strong>Default Value</strong></td></tr><tr><td><p><strong><code>backgroundColor</code></strong></p><p>Upload mode - background color.</p><p><strong>Example:</strong> <code>upload: { backgroundColor: "gray" }</code></p></td><td>string</td><td><strong><code>#BDBDBD</code></strong></td></tr><tr><td><p><strong><code>card.backgroundColor</code></strong></p><p>Upload mode - card background color.</p><p><strong>Example:</strong> <code>upload: { card: { backgroundColor: "white" } }</code></p></td><td>string</td><td><strong><code>#FFFFFF</code></strong></td></tr><tr><td><p><strong><code>startScreen.title.color</code></strong></p><p>Upload mode - start screen - title color.</p><p><strong>Example:</strong> <code>upload: { startScreen: { title: { color: "black" } } }</code></p></td><td>string</td><td><strong><code>"#323232"</code></strong></td></tr><tr><td><p><strong><code>startScreen.details.color</code></strong></p><p>Upload mode - start screen - details color.</p><p><strong>Example:</strong> <code>upload: { startScreen: { details: { color: "gray" } } }</code></p></td><td>string</td><td><strong><code>"#828282"</code></strong></td></tr><tr><td><p><strong><code>startScreen.allowButton.backgroundColor</code></strong></p><p>Upload mode - start screen - allow button background color.</p><p><strong>Example:</strong> <code>upload: { startScreen: { allowButton: { backgroundColor: "black" } } }</code></p></td><td>string</td><td><strong><code>"#323232"</code></strong></td></tr><tr><td><p><strong><code>startScreen.allowButton.label.color</code></strong></p><p>Upload mode - start screen - allow button label color.</p><p><strong>Example:</strong> <code>upload: { startScreen: { allowButton: { label: { color: "white" } } } }</code></p></td><td>string</td><td><strong><code>"#FFFFFF"</code></strong></td></tr><tr><td><p><strong><code>loadingScreen.icon.color</code></strong></p><p>Upload mode - loading screen - icon color.</p><p><strong>Example:</strong> <code>upload: { loadingScreen: { icon: { color: "black" } } }</code></p></td><td>string</td><td><strong><code>"#000000"</code></strong></td></tr><tr><td><p><strong><code>loadingScreen.text.color</code></strong></p><p>Upload mode - loading screen - text color.</p><p><strong>Example:</strong> <code>upload: { loadingScreen: { text: { color: "black" } } }</code></p></td><td>string</td><td><strong><code>"#323232"</code></strong></td></tr><tr><td><p><strong><code>failureScreen.icon.color</code></strong></p><p>Upload mode - failure screen - icon color.</p><p><strong>Example:</strong> <code>upload: { failureScreen: { icon: { color: "red" } } }</code></p></td><td>string</td><td><strong><code>"#E21B45"</code></strong></td></tr><tr><td><p><strong><code>failureScreen.icon.shadowColor</code></strong></p><p>Upload mode - failure screen - icon shadow color.</p><p><strong>Example:</strong> <code>upload: { failureScreen: { icon: { shadowColor: "indianred" } } }</code></p></td><td>string</td><td><strong><code>"#FFE4E6"</code></strong></td></tr><tr><td><p><strong><code>failureScreen.title.color</code></strong></p><p>Upload mode - failure screen - title color.</p><p><strong>Example:</strong> <code>upload: { failureScreen: { title: { color: "black" } } }</code></p></td><td>string</td><td><strong><code>"#323232"</code></strong></td></tr><tr><td><p><strong><code>failureScreen.details.color</code></strong></p><p>Upload mode - failure screen - details color.</p><p><strong>Example:</strong> <code>upload: { failureScreen: { details: { color: "gray" } } }</code></p></td><td>string</td><td><strong><code>"#828282"</code></strong></td></tr><tr><td><p><strong><code>failureScreen.retryButton.backgroundColor</code></strong></p><p>Upload mode - failure screen - retry button background color.</p><p><strong>Example:</strong> <code>upload: { failureScreen: { retryButton: { backgroundColor: "red" } } }</code></p></td><td>string</td><td><strong><code>"#E21B45"</code></strong></td></tr><tr><td><p><strong><code>failureScreen.retryButton.label.color</code></strong></p><p>Upload mode - failure screen - retry button label color.</p><p><strong>Example:</strong> <code>upload: { failureScreen: { retryButton: { label: { color: "white" } } } }</code></p></td><td>string</td><td><strong><code>"#FFFFFF"</code></strong></td></tr><tr><td><p><strong><code>successScreen.icon.color</code></strong></p><p>Upload mode - success screen - icon color.</p><p><strong>Example:</strong> <code>upload: { successScreen: { icon: { color: "green" } } }</code></p></td><td>string</td><td><strong><code>"#0BAA43"</code></strong></td></tr><tr><td><p><strong><code>successScreen.icon.shadowColor</code></strong></p><p>Upload mode - success screen - icon shadow color.</p><p><strong>Example:</strong> <code>upload: { successScreen: { icon: { shadowColor: "darkseagreen" } } }</code></p></td><td>string</td><td><strong><code>"#DAFEE5"</code></strong></td></tr><tr><td><p><strong><code>successScreen.text.color</code></strong></p><p>Upload mode - success screen - text color.</p><p><strong>Example:</strong> <code>upload: { successScreen: { text: { color: "green" } } }</code></p></td><td>string</td><td><strong><code>"#0BAA43"</code></strong></td></tr></tbody></table>

Below are screenshots demonstrating where each option is applied in the SDK screens for the **Upload** mode.

### All screens (upload mode)

![All screens (upload mode)](/files/gzeQ2gY9J4Mp3ozNBan5)

### Start screen (upload mode)

![Start screen (upload mode)](/files/3ff6Mz1gMEBrBJDtMJr6)

### Loading screen (upload mode)

![Loading screen (upload mode)](/files/eIyTkVBDj814de7U7B1Q)

### Success screen (upload mode)

![Success screen (upload mode)](/files/iK3jzfvlQrnU9wnb0DYN)

### Failure screen (upload mode)

![Failure screen (upload mode)](/files/K2YYHr29SF1XJQnTAZzn)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.caf.io/caf-sdk/web-javascript/getting-started/document-detector/sdk-builder-options/appearance.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.