# 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:

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

### Theme configuration visual guide

<figure><img src="/files/KY1GDeys9rsXvvsvOU3g" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/U6DH2KVjH9SLxl1jy85w" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/zeEHJl3LbSJTnWcpqbBk" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.squidrouter.com/widget-integration/add-a-widget/widget/customization-guide/theme-customization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.