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", // only "light" and "dark"
theme: {
light: {
"theme-color": "#ffffff", // color of the background
primary: "#F11D46",
"text-primary": "#000000",
"text-secondary": "#767676",
"text-disabled": "#C2C2C2",
"gradient-A": "#A41256", // composite color for hover/active/focus effects on button
"gradient-B": "#5E0864", // composite color for hover/active/focus effects on button
backdropOpacity: "0.25", // adjust backdrop opacity (values between 0-1)
},
dark: {
"theme-color": "#1c1c1c", // color of the background
primary: "#f84b4b",
"text-primary": "#ffffff",
"text-secondary": "#D1D1D1",
"text-disabled": "#6b6b6b",
"gradient-A": "#c4005d", // composite color for hover/active/focus effects on button
"gradient-B": "#8c1a8c", // composite color for hover/active/focus effects on button
backdropOpacity: "0.75", // adjust backdrop opacity (values between 0-1)
},
}
}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 starting colour for the gradient effect on buttons when hovered  |
| the ending colour for the gradient effect on buttons when hovered  |
| if your checkout appears as a pop-up, this setting defines the opacity of the page behind the checkout  |