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