> 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/caf-sdk-pt-br/web-javascript/getting-started/document-detector/sdk-builder-options/appearance.md).

# Aparência

Aqui está uma lista de todos os parâmetros aceitos no **aparência** objeto presente nas opções do Document Detector.

**Aprimorado na v6.8.3:** A configuração de aparência agora usa um formato de objeto aninhado para melhor organização e legibilidade.

<table data-header-hidden><thead><tr><th width="468"></th><th></th></tr></thead><tbody><tr><td><strong>Parâmetro</strong></td><td><strong>Tipo</strong></td></tr><tr><td><p><strong><code>geral</code></strong></p><p>Personalizações gerais de aparência para o SDK.</p></td><td><a href="#cx6h36ldsc3o">Geral</a></td></tr><tr><td><p><strong><code>captura</code></strong></p><p>Personalizações de aparência para os modos de captura "manual" e "automático".</p></td><td><a href="#id-8d8wujh5vkqn">Captura</a></td></tr><tr><td><p><strong><code>envio</code></strong></p><p>Personalizações de aparência para o modo de captura "upload".</p></td><td><a href="#cy8sf4ohycir">Envio</a></td></tr></tbody></table>

## Formato de configuração <a href="#configuration_format" id="configuration_format"></a>

As opções de aparência usam um **formato de objeto aninhado** para melhor organização:

```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" %}
Se você estiver atualizando de uma versão anterior, suas configurações existentes com notação pontuada (por exemplo, `"general.fontFamily": "arial"`) continuarão funcionando, mas recomendamos migrar para o formato de objeto aninhado mostrado acima.
{% endhint %}

## Geral <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>Parâmetro</strong></td><td><strong>Tipo</strong></td><td><strong>Valor Padrão</strong></td></tr><tr><td><p><strong><code>família da fonte</code></strong></p><p>Altera a fonte de todos os elementos contidos no SDK.</p><p><strong>Exemplo:</strong> <code>general: { fontFamily: "arial" }</code></p></td><td>string</td><td>A família da fonte é herdada da página.</td></tr><tr><td><p><strong><code>cor do ícone do botão de fechar</code></strong></p><p>Personalização da cor do ícone do botão de fechar do SDK.</p><p><strong>Exemplo:</strong> <code>general: { closeButtonIconColor: "red" }</code></p></td><td>string</td><td><strong><code>"#fff"</code></strong></td></tr></tbody></table>

## Captura <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>Parâmetro</strong></td><td><strong>Tipo</strong></td><td><strong>Valor Padrão</strong></td></tr><tr><td><p><strong><code>ícone do botão de captura</code></strong></p><p>Personalização da origem do ícone de captura.</p><p>Opções: URL da imagem ou SVG em base64.</p><p><strong>Exemplo:</strong> <code>capture: { captureButtonIcon: "url" }</code></p></td><td>string</td><td>O ícone padrão do botão de captura é usado.</td></tr><tr><td><p><strong><code>tamanho do ícone do botão de captura</code></strong></p><p>Personalização do tamanho do ícone de captura.</p><p><strong>Exemplo:</strong> <code>capture: { captureButtonIconSize: "50%" }</code></p></td><td>string</td><td><strong><code>"100%"</code></strong></td></tr><tr><td><p><strong><code>cor do botão de captura</code></strong></p><p>Personalização da cor do botão de captura.</p><p><strong>Exemplo:</strong> <code>capture: { captureButtonColor: "green" }</code></p></td><td>string</td><td><strong><code>"#fff"</code></strong></td></tr><tr><td><p><strong><code>ocultar título de captura</code></strong></p><p>Oculta o título de captura.</p><p><strong>Exemplo:</strong> <code>capture: { hideCaptureTitle: true }</code></p></td><td>booleano</td><td><strong><code>false</code></strong></td></tr></tbody></table>

## Envio <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>Parâmetro</strong></td><td><strong>Tipo</strong></td><td><strong>Valor Padrão</strong></td></tr><tr><td><p><strong><code>cor de fundo</code></strong></p><p>Modo de upload - cor de fundo.</p><p><strong>Exemplo:</strong> <code>upload: { backgroundColor: "gray" }</code></p></td><td>string</td><td><strong><code>#BDBDBD</code></strong></td></tr><tr><td><p><strong><code>cor de fundo do cartão</code></strong></p><p>Modo de upload - cor de fundo do cartão.</p><p><strong>Exemplo:</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>cor do título da startScreen</code></strong></p><p>Modo de upload - tela inicial - cor do título.</p><p><strong>Exemplo:</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>cor dos detalhes da startScreen</code></strong></p><p>Modo de upload - tela inicial - cor dos detalhes.</p><p><strong>Exemplo:</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>cor de fundo do botão allowButton da startScreen</code></strong></p><p>Modo de upload - tela inicial - cor de fundo do botão de permitir.</p><p><strong>Exemplo:</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>cor do rótulo do botão allowButton da startScreen</code></strong></p><p>Modo de upload - tela inicial - cor do rótulo do botão de permitir.</p><p><strong>Exemplo:</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>cor do ícone da loadingScreen</code></strong></p><p>Modo de upload - tela de carregamento - cor do ícone.</p><p><strong>Exemplo:</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>cor do texto da loadingScreen</code></strong></p><p>Modo de upload - tela de carregamento - cor do texto.</p><p><strong>Exemplo:</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>cor do ícone da failureScreen</code></strong></p><p>Modo de upload - tela de falha - cor do ícone.</p><p><strong>Exemplo:</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>cor da sombra do ícone da failureScreen</code></strong></p><p>Modo de upload - tela de falha - cor da sombra do ícone.</p><p><strong>Exemplo:</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>cor do título da failureScreen</code></strong></p><p>Modo de upload - tela de falha - cor do título.</p><p><strong>Exemplo:</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>cor dos detalhes da failureScreen</code></strong></p><p>Modo de upload - tela de falha - cor dos detalhes.</p><p><strong>Exemplo:</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>cor de fundo do botão retryButton da failureScreen</code></strong></p><p>Modo de upload - tela de falha - cor de fundo do botão de tentar novamente.</p><p><strong>Exemplo:</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>cor do rótulo do botão retryButton da failureScreen</code></strong></p><p>Modo de upload - tela de falha - cor do rótulo do botão de tentar novamente.</p><p><strong>Exemplo:</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>cor do ícone da successScreen</code></strong></p><p>Modo de upload - tela de sucesso - cor do ícone.</p><p><strong>Exemplo:</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>cor da sombra do ícone da successScreen</code></strong></p><p>Modo de upload - tela de sucesso - cor da sombra do ícone.</p><p><strong>Exemplo:</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>cor do texto da successScreen</code></strong></p><p>Modo de upload - tela de sucesso - cor do texto.</p><p><strong>Exemplo:</strong> <code>upload: { successScreen: { text: { color: "green" } } }</code></p></td><td>string</td><td><strong><code>"#0BAA43"</code></strong></td></tr></tbody></table>

Abaixo estão capturas de tela que demonstram onde cada opção é aplicada nas telas do SDK para o **Envio** modo.

### Todas as telas (modo upload)

![Todas as telas (modo upload)](/files/ea9e19fa20f4617c803d76aac59fa7a815e16a33)

### Tela inicial (modo upload)

![Tela inicial (modo upload)](/files/bf7cbc4f8946c8cd2f7ff369c952656d4e5414ae)

### Tela de carregamento (modo upload)

![Tela de carregamento (modo upload)](/files/fae18b90b8b997cadec19dcd29f599cfb062200e)

### Tela de sucesso (modo upload)

![Tela de sucesso (modo upload)](/files/02fe3f34bf152a31a0af6431c93fc0a12d168283)

### Tela de falha (modo upload)

![Tela de falha (modo upload)](/files/43f7fca114427f942a540631d100ac2ca475224d)


---

# 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/caf-sdk-pt-br/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.