# Customize the Theme
We offer a range of customization options to help you create a widget that matches your preferred style. Please refer to the guide below and our [Widget API reference](https://docs.xy.finance/bridge-aggregator-integration/xy-finance-widget-npm/widget-api-reference) for detailed instructions.
```tsx
const theme = {
...,
mode: 'light'
}
function App() {
return (
)
}
```
## mode
When customizing your website-style widget, start by selecting a mode that suits your preference and proceed with the following customization. We offer two modes: `dark` and `light`.
```tsx
const theme = {
...,
mode: 'dark'
}
```
{% tabs %}
{% tab title="dark mode" %}
{% endtab %}
{% tab title="light mode" %}
{% endtab %}
{% endtabs %}
## font-family
This option sets the font display for the widget, and works in compatibility with [**css font-family property**](https://www.w3schools.com/cssref/pr_font_font-family.php).
```tsx
const theme = {
...,
fontFamily: 'ui-sans-serif, system-ui, -apple-system'
}
```
{% hint style="info" %}
Please note that you need to install the font that you want to use in your frontend project by yourself.
{% endhint %}
## border-radius
You have the option to customize the border-radius of three different components based on your preference.
```tsx
const theme = {
...,
borderRadius: {
container: '12px',
inner: '8px',
button: '32px'
}
}
```
Please refer to the image below to see the areas that are affected by each border-radius class:
{% tabs %}
{% tab title="container" %}
{% endtab %}
{% tab title="inner" %}
{% endtab %}
{% tab title="button" %}
{% endtab %}
{% endtabs %}
## colors
First and foremost, customize the colors that will be used in our widget to create a unified appearance. You have the option to select a primary color and a gradient color to personalize the components.
Secondary, the primary color represents the main color style of the entire widget. As shown in the example below, the primary color will be applied throughout the widget whenever it is used by users.
```tsx
const theme = {
...,
colors: {
primary: '#277EEC',
gradient: ['#277EEC', '#1499E4']
}
}
```
{% tabs %}
{% tab title="primary" %}
{% endtab %}
{% tab title="primary changed" %}
{% endtab %}
{% endtabs %}
Additionally, assign the chosen colors to the respective components. Currently, the button is the only component that supports gradient colors.
```tsx
const theme = {
...,
colors: {
primary: '#277EEC',
gradient: ['#277EEC', '#1499E4']
},
components: {
button: {
variant: 'gradient' // 'filled' | 'gradient' | 'grey' | 'neutral'
}
}
}
```
If you prefer to have a single color for your button component, you can refer to the example code provided below to see the desired result.
```tsx
const theme = {
...,
components: {
button: {
variant: 'filled' // The color will be determined by the primary color configuration as it is set to 'filled'.
}
}
}
```
{% tabs %}
{% tab title="gradient" %}
{% endtab %}
{% tab title="filled" %}
{% endtab %}
{% endtabs %}
Last but not least, we also offer two additional styles for the button: 'grey' and 'neutral'. You can choose the style that best fits your preferences and design aesthetics.
{% tabs %}
{% tab title="grey" %}
grey
{% endtab %}
{% tab title="neutral" %}
neutral
{% endtab %}
{% endtabs %}
{% hint style="info" %}
For additional information, please refer to our [Widget API Reference](https://docs.xy.finance/bridge-aggregator-integration/xy-finance-widget-npm/widget-api-reference).
{% endhint %}
