3️⃣Customize the Theme

Customize the widget to best match your web’s design.

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 for detailed instructions.

const theme = {
  ...,
  mode: 'light'
}

function App() {
  return (
    <div>
      <XSwapWidget theme={theme} />
    </div>
  )
}

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.

const theme = {
  ...,
  mode: 'dark'
}

dark mode

light mode

font-family

This option sets the font display for the widget, and works in compatibility with css font-family property.

const theme = {
  ...,
  fontFamily: 'ui-sans-serif, system-ui, -apple-system'
}

Please note that you need to install the font that you want to use in your frontend project by yourself.

border-radius

You have the option to customize the border-radius of three different components based on your preference.

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:

container

inner

button

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.

const theme = {
  ...,
  colors: {
    primary: '#277EEC',
    gradient: ['#277EEC', '#1499E4']
  }
}

primary

primary changed

Additionally, assign the chosen colors to the respective components. Currently, the button is the only component that supports gradient colors.

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.

const theme = {
  ...,
  components: {
    button: {
      variant: 'filled' // The color will be determined by the primary color configuration as it is set to 'filled'.
    }
  }
}

gradient

filled

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.

grey

grey

neutral

neutral

For additional information, please refer to our Widget API Reference.