O checkout Ventrata oferece dois modos básicos de cor - LIGHT (CLARO) (por defeito) e DARK (ESCURO).

Para escolher o modo de cor do seu checkout web, use o atributo "defaultTheme" na sua data-config.

O modo CLARO é o modo por defeito. Ao adicionar o atributo "theme" ao data-config, pode personalizar a cor das bordas dos botões, dos elementos selecionados e de certos ícones.

📒 NOTA

Defina as cores no formato HEX, como #FFFFFF para branco.

data-config='{"productID":"XXX", "apiKey":"XXX", "theme": "#6FD316" }’

Para alterar ou especificar o modo, adicione o atributo "defaultTheme" ao data-config.

Modo LIGHT (CLARO)

data-config='{"productID":"XXX", "apiKey":"XXX", "defaultTheme": "light" }’

Modo DARK (ESCURO)

data-config='{"productID":"XXX", "apiKey":"XXX", "defaultTheme": "dark" }’

Configurações avançadas

Embora, para uma definição simples do tema, a modificação do data-config seja suficiente, para uma personalização de cores mais avançada, configure definições específicas para cada modo como um objeto JavaScript:

{
    "defaultTheme": "dark",
    "theme": {
         "light": {
              "theme-color": "#ffffff",
              "primary": "#F11D46",
              "text-primary": "#000000",
              "text-secondary": "#767676",
              "text-disabled": "#C2C2C2",
              "gradient-A": "#A41256",
              "gradient-B": "#5E0864",
              "backdropOpacity": "0.25"
          },
          "dark": {
              "theme-color": "#1c1c1c",
              "primary": "#f84b4b",
              "text-primary": "#ffffff",
              "text-secondary": "#D1D1D1",
              "text-disabled": "#6b6b6b",
              "gradient-A": "#c4005d",
              "gradient-B": "#8c1a8c",
              "backdropOpacity": "0.75"
          }
     }
}

Atributo	Descrição
`"defaultTheme"`	apenas valores `"light"` (claro) ou `"dark"` (escuro)
`"theme-color"`	a cor de fundo
`"primary"`	a cor das bordas dos botões, dos elementos selecionados e de certos ícones
`"text-primary"`	a cor dos elementos principais do checkout, incluindo títulos de produtos e unidades, bem como datas
`"text-secondary"`	a cor dos elementos secundários, como descrições de produtos e unidades, bem como preços
`"text-disabled"`	a cor usada para datas esgotadas ou datas passadas
`"gradient-A"`	a cor composta para os efeitos de passar o cursor/ativo/focado num botão
`"gradient-B"`	a cor composta para os efeitos de cursor/ativo/focado num botão
`"backdropOpacity"`	se o checkout for apresentado numa janela emergente, esta definição estabelece a opacidade da página por trás do checkout (valores entre 0 e 1)

Como definir as cores do checkout

Configurações avançadas