Ventrata Checkout offers two basic colour modes - LIGHT (default) and DARK.
To choose the colour mode for your web checkout, use the "defaultTheme" attribute in your data-config.
LIGHT mode is the default mode. By adding the "theme" attribute to your data-config, you can customise the colour of button borders, selected elements and certain icons.
📒 NOTE
Define colours in HEX format, such as #FFFFFF for white.
data-config='{"productID":"XXX", "apiKey":"XXX", "theme": "#6FD316" }’
To change or specify the mode, add the "defaultTheme" attribute to your data-config.
LIGHT mode
data-config='{"productID":"XXX", "apiKey":"XXX", "defaultTheme": "light" }’
DARK mode
data-config='{"productID":"XXX", "apiKey":"XXX", "defaultTheme": "dark" }’
Complex Settings
While for simple theme definition, modifying the data-config is sufficient, for more advanced colour customisation, configure more complex settings for each mode as a JavaScript object:
{
"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"
}
}
}Attribute | Description |
|
|
| the background colour  |
| the colour of button borders, selected elements and certain icons  |
| the colour of key checkout elements, including product and unit titles, and dates |
| the colour of secondary elements, like product and unit descriptions, and prices |
| the colour used for sold-out dates or dates in the past |
| the composite color for hover/active/focus effects on a button  |
| the composite color for hover/active/focus effects on a button  |
| if your checkout appears as a pop-up, this setting defines the opacity of the page behind the checkout (values between 0-1)
 |