# CSS customization

```
// 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)"
        }
```


---

# Agent Instructions: 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:

```
GET https://docs.usewinter.com/front-end-integration/css-customization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.