# 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 

```jsx
<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:

```css
#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`.

```jsx
displayDivider: true
```

### Transparent widget

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

```jsx
advanced:{
      transparentWidget: true,
 }
```

### Theme configuration visual guide

<figure><img src="https://4247625265-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtXbXyuWIO2PwzNc5Dets%2Fuploads%2FfHEYmggdxH4kIsTFge6j%2Fcustomize-a.png?alt=media&#x26;token=ae4bde26-0526-4756-924b-065b669329cd" alt=""><figcaption></figcaption></figure>

<figure><img src="https://4247625265-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtXbXyuWIO2PwzNc5Dets%2Fuploads%2FyMZLLSE9QICXRHUcuvyT%2Fcustomize-b.png?alt=media&#x26;token=3ae98c10-84ca-4dcd-b0ae-24bfa2213688" alt=""><figcaption></figcaption></figure>

<figure><img src="https://4247625265-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtXbXyuWIO2PwzNc5Dets%2Fuploads%2FgRA1Aut4a3sG48ilBIT2%2Fcustomize-c.png?alt=media&#x26;token=7f2c7485-8247-48e1-a64c-614056b463f7" alt=""><figcaption></figcaption></figure>