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.

Full theme customization example 

<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,
        },
      }
    }
  } />

Styling via CSS

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;
}

Display divider

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

Transparent widget

If you would like the widget to be slightly transparent, there is an advanced attribute for this: 

advanced:{
      transparentWidget: true,
 }

Theme configuration visual guide

Last updated