Theme Customization
The
style
attribute enables customisation of the widget theme's colors, opacity and the inclusion of a divider between the "from" and "to" sections.<SquidWidget config={
{
style: {
neutralContent: "#9DA7B1",
baseContent: "#FFFDFD",
base100: "#434565",
base200: "#202230",
base300: "#161522",
error: "#ED6A5E",
warning: "#FFB155",
success: "#62C555",
primary: "#AB67CB",
secondary: "#37394C",
secondaryContent: "#B2BCD3",
neutral: "#383A4C",
roundedBtn: "24px",
roundedBox: "20px",
roundedDropDown: "0px",
displayDivider: false,
advanced: {
transparentWidget: false,
},
}
}
} />
To style each component of the Widget via CSS, you can use the following IDs selectors:
- Widget container:
squid-widget
- Widget header:
squid-widget-header
- Widget header logo:
squid-header-logo
- Widget header title:
squid-header-title
- Swap direction text ("from" or "to"):
squid-swap-direction-txt
- Primary Hover button:
squid-primary-hover-button
- Secondary hover button:
squid-secondary-hover-button
- Dropdown button:
squid-dropdown-btn
- Dropdown icon:
squid-dropdown-icon
- Dropdown label:
squid-dropdown-label
- Icon button:
squid-icon-button
- Submit swap button:
squid-submit-swap-btn
- Swap source container:
squid-swap-source
- Swap destination container:
squid-swap-destination
Then, in your CSS, add your custom styles:
#squid-swap-source {
background-color: #091428;
color: #fff;
}
#squid-swap-destination {
background-color: #000309;
color: #fff;
}
If you would like to include a divider between the "From" and "To" sections, set this to true. When set to true, both "From" and "To" sections are set to
base200
, and the divider color is set to base300
.displayDivider: true
If you would like the widget to be slightly transparent, there is an advanced attribute for this:
advanced:{
transparentWidget: true,
}



Last modified 6mo ago