CSS customization

You can alter the look of our checkout to match your branding!
// Pass in the appearance prop into the WinterCheckout component
<WinterCheckout appearance={{
// The checkout is split into two halves
leftBackgroundColor, - The left background will also be applied to inputs & the wallet buttons
rightBackgroundColor, - The right background will also be applied to the section with all of the numbers
fontFamily, - The font family for the entirety of the checkout modal
borderColor, - There's a border around the wallet buttons & input fields
primaryTextColor,
secondaryTextColor,
buttonColor, - This will be applied to the quantity buttons, the “pay with card”, and the “submit order” button
buttonTextColor, - The color of the text in the "pay with card", "submit order", and "here" button
quantityButtonPlusMinusSvgFilter, - The color for the svg plus, minus nft quantity buttons, & arrows > at the top of the right side of the checkout
buttonClipLoaderColor, - This is the color of the spinning loader when you click "submit order" inside of the button
buttonAndInputBoxShadow,
buttonAndInputFocusBoxShadow,
// If you want to add more customization to the payment component you can use the values below
// By default it will grab the customization from above unless these are altered
paymentInputBackgroundColor,
paymentTextColor,
paymentPlaceholderColor,
paymentInputBoxShadow,
paymentInputFocusBoxShadow
}}
/>
​
// Color's accept any css color
// BoxShadow's need to be in this format "0 3px 6px 1px rgba(56, 177, 247, 0.15)"
// SvgFilter should look like this "invert(100%) sepia(100%) saturate(1%) hue-rotate(135deg) brightness(105%) contrast(101%)"
// You can go here https://codepen.io/sosuke/pen/Pjoqqp to see what a specific color's svg filter would look like
​
Here's an example appearance prop
const appearance = {
leftBackgroundColor: "#131317",
rightBackgroundColor: "#22222d",
buttonTextColor: "black",
buttonColor: "#f59e0c",
primaryTextColor: "white",
secondaryTextColor: "#85868a",
fontFamily: "Montserrat,sans-serif",
buttonAndInputBoxShadow: "0 3px 6px 1px rgba(217, 119, 6, 0.2)",
buttonAndInputFocusBoxShadow: "0 3px 6px 1px rgba(217, 119, 6, 0.8)",
quantityButtonPlusMinusSvgFilter: "invert(100%) sepia(100%) saturate(1%) hue-rotate(135deg) brightness(105%) contrast(101%)",
inputBackgroundColor: "#131317",
buttonClipLoaderColor: "white",
borderColor: "rgba(245,158,11)"
}