Customizing The KyberSwap Widget
Endlessly Customizable
Overview
Below you’ll find a few examples showing how you can customize the widget theme to match the look and feel of your dApp. All of them can be integrated using the following code snippet where you can set your theme
:
Customizing the width
Widget has a fixed height of 360px and a default width of 360px. You cannot modify the height of the widget. You can modify the width up to a minimum width of 300px.
You can customize the width by passing a valid CSS number or width to the widget's width holder.
Customizing the fees
The KyberSwap Widget makes it easy to configure a transaction facilitation fee by passing additional parameters to the widget. Information about parameters you can refer to KyberSwap Aggregator APIs.
Customizing the themes
You can set optional parameters to tailor the appearance and functionality of the swap widget to fit your app.
All attributes below are color codes, except buttonRadius
(number), borderRadius
(number between 0 and 1), and fontFamily
(string).
You can check out examples of the swap widget, and the Figma file if you want to mock it up first!
primary
string
#F1FFEE
primary background color of swap form
secondary
string
#F1FFEE
secondary background color of swap form
dialog
string
#F1FFEE
color of dialog
borderRadius
string
30px
border-radius of swap form and swap button (same border-radius)
buttonRadius
string
5px
border-radius of swap button
stroke
string
#F1FFEE
color of the stroke
interactive
string
#F1FFEE
color of interactive button(Swap icon and token picker)
accent
string
#F1FFEE
swap button and link color
success
string
#F1FFEE
success color
warning
string
#F1FFEE
warning color
error
string
#F1FFEE
error color
text
string
#F1FFEE
primary text color
subtext
string
#F1FFEE
secondary text color
fontFamily
string
Roboto
font-family of Swap form
Customizing the Token Lists
Last updated