Squid Dev Documentation
  • Getting Started
    • Overview
    • Get an Integrator ID
    • Integrator Quickstart
  • Widget Integration
    • Add A Widget
      • Swap widget
        • Getting Started
        • Installing the Widget
        • React Installation
        • NextJS Installation
        • Vite Installation
        • Iframe Installation
        • Customization Guide
          • Default User Settings
          • Configuring Content
          • Default Chains and Tokens
          • Configuration Types
          • Collect Fees
        • Information for Integrators
        • Set default chains and tokens via URL
        • Errors
    • Upgrade Your Widget
  • API & SDK Integration
    • API
      • Swap & Bridge Example
      • Staking Example
      • Cross-chain NFT Purchase Example
      • Get Route Status
    • SDK
      • Cross-chain Swap Example
      • Staking Example
      • Cross-chain NFT Purchase Example
      • Get Route Status
    • Key Concepts
      • Route Request Parameters
      • Get a route
      • Execute the route
      • 🪝Hooks
        • How do hooks work
        • Build a preHook
        • Build a postHook
        • Using the full ERC20 or Native balance in a call
        • ❗Transfer the remainder to the user
        • Get a route and execute as normal
      • Express
      • Track status
      • Types
      • Collect Fees
      • Get supported tokens and chains
    • Coral: Intent Swaps
      • Integrating Coral
    • NEW: Bitcoin and Solana
  • Adding Tokens
    • Whitelist a Token
    • Interchain Token(ITS) Listings
      • How To List
    • Circle's EURC Integration Guide
  • Adding Chains
    • Integrate Your Chain
  • Additional Resources
    • Contracts
    • Additional Dev Resources
      • Choose How To Integrate Squid
      • Squid x Tenderly
      • Testnet or Mainnet?
      • Understanding Gas Payments
      • Supported Chains and Tokens
      • Request a new supported token
      • Liquidity Sources
        • axlASSET Liquidity
      • Integrator type specific docs
        • DEXs
        • Aggregators
        • NFTs
      • Setting up an EVM signer
      • Setting up Cosmos signer
      • Contract addresses
      • SDK easter eggs
        • Setting toAmount
        • getAllBalances
        • Advanced set up
        • Manually approve a route
        • Manually approve an ERC20
      • Whitelist a token
      • Security & Audits
        • Security
        • Audits
        • Axelar
      • Get an integrator-id
    • Architecture
      • FAQ
      • Liquidity model
      • Architecture
      • General message passing (GMP)
      • Transaction times and fees
      • Fallback behaviour on failed transactions
      • Axelar
    • Brand Assets
      • "Powered by Squid" Policy
    • Audits & Security
    • Contact
  • Changelog
    • SDK
      • v1.3
      • v1.2
    • API
      • v1.9
      • v1.8
      • v1.7
      • v1.6
Powered by GitBook
On this page
  • Full theme customization example
  • Styling via CSS
  • Display divider
  • Transparent widget
  • Theme configuration visual guide
  1. Old v2 Documentation (Deprecated)
  2. Add A Widget
  3. Swap widget
  4. Customization Guide

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 11 months ago