> For the complete documentation index, see [llms.txt](https://apidocs.onekeypayments.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apidocs.onekeypayments.com/api-reference/fragment-sdk/all-in-one/customize-the-ui.md).

# Customize the UI

Elevate your user experience with our advanced color customization feature. We provide a bespoke version of the theme to perfectly match the unique style of your website's UI.\
To fine-tune the colors, simply add a `colorSchema[]` object as illustrated in the example.

{% hint style="success" %}
You don't need to send the entire object, you can include the sections you would like to change.
{% endhint %}

### `colorSchema[]` object

```javascript
const colorSchema = {
  //primary button is to complete the action like "Complete payment" and "Continue"
  "button": {
    "primary": {
      "background": {
        "default": "#3C5BFC",
        "hover": "#7087FF",
        "active": "#2E47C9"
      },
      "text": {
        "color": {
          "default": "#FFFFFF"
        }
      }
    },
    //this is the link button like "go back"
    "tertiary": {
      "text": {
        "color": {
          "default": "#3C5BFC"
        }
      }
    }
  },
  //This affect the inputs and select
  "input": {
    "background": {
      "default": "#FFFFFF",
      "locked": "#E6E7EB"
    },
    "border": {
      "color": {
        "default": "#373840",
        "locked": "#D5D6DE",
        "active": "#3C5BFC",
        "error": "#CF3434"
      }
    },
    "text": {
      "color": {
        "label": "#B0B3BF",
        "input": "#0B1130",
        "placeholderHint": "#B0B3BF"
      }
    }
  },
  //This affects the text that is not related to the inputs.
  "text": {
    "color": "#373840"
  },
  //This is the background color of the label on the input and select when add some value
  "label": {
    "background": "#FFFFFF"
  }
};

```

### Visual references

In the images below you will find the visual references of the colorSchema parameters and color customization possibilities.

<div><figure><img src="/files/6ePL31EBWWLHDPbF6Nej" alt=""><figcaption></figcaption></figure> <figure><img src="/files/lh3sg5Vn8BTLnjF0HBK3" alt=""><figcaption></figcaption></figure> <figure><img src="/files/LyxfVF3bqQY1UY4ofJot" alt=""><figcaption></figcaption></figure></div>