> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS Variables

<Card title="Recommended: JavaScript SDK with React Hooks" icon="react" color="#4779FE">
  For new React apps, we recommend the JavaScript SDK with React Hooks (`@dynamic-labs-sdk/react-hooks`) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the [React quickstart (JavaScript SDK)](/javascript/reference/react-quickstart) to get started.
</Card>

The Dynamic SDK allows you to customize the theme via [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). We recommend setting these CSS variables in your host site by targeting the `dynamic-shadow-dom` class.

Here is an example of a custom theme done via CSS variables and the code used below:

<iframe frameBorder="0" width="100%" height="600px" src="https://readme-embeds.herokuapp.com/css-variables" />

```css theme={"system"}
.dynamic-shadow-dom {
  --dynamic-font-family-primary: "Poppins", sans-serif;
  --dynamic-font-family-numbers: "Roboto Mono", monospace, sans-serif;
  --dynamic-base-1: #fff;
  --dynamic-base-2: #fff;
  --dynamic-base-3: #fff;
  --dynamic-base-4: #fff;
  --dynamic-base-5: #fff;
  --dynamic-brand-hover-color: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.08),
      rgba(0, 0, 0, 0.08)
    ), #4779ff;
  --dynamic-brand-primary-color: #4779ff;
  --dynamic-brand-secondary-color: rgba(71, 121, 255, 0.15);
  --dynamic-connection-green: #41cc99;
  --dynamic-border-radius: 12px;
  --dynamic-hover: rgba(22, 37, 77, 0.03);
  --dynamic-error-1: #ff4646;
  --dynamic-error-2: rgba(255, 70, 70, 0.1);
  --dynamic-footer-background-color: #fff;
  --dynamic-footer-text-color: #000;
  --dynamic-footer-icon-color: #4779ff;
  --dynamic-loading-animation-gradient: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0)
  );
  --dynamic-overlay: #fff;
  --dynamic-shadow-down-1: 0px 3px 0px #fff;
  --dynamic-shadow-down-2: 0px 3px 0px #000000;
  --dynamic-shadow-down-3: 0px 6px 0px #000000;
  --dynamic-shadow-up-1: 0px -8px 48px -8px rgba(109, 121, 165, 0.16);
  --dynamic-text-link: #0047ff;
  --dynamic-text-primary: #000;
  --dynamic-text-secondary: black;
  --dynamic-text-size-body-mini: 11px;
  --dynamic-text-size-body-normal: 15px;
  --dynamic-text-size-body-small: 12px;
  --dynamic-text-size-button-primary: 14px;
  --dynamic-text-size-button-secondary: 12px;
  --dynamic-text-size-numbers-big: 14px;
  --dynamic-text-size-numbers-medium: 12px;
  --dynamic-text-size-numbers-small: 10px;
  --dynamic-text-size-title: 18px;
  --dynamic-text-tertiary: rgba(0, 0, 0, 0.65);
  --dynamic-badge-background: #000;
  --dynamic-badge-color: #fff;
  --dynamic-badge-dot-background: #fff;
  --dynamic-badge-primary-background: #4779FF;
  --dynamic-badge-primary-color: #fff;
  --dynamic-search-bar-background: ;
  --dynamic-search-bar-background-hover: ;
  --dynamic-search-bar-background-focus: #fff;
  --dynamic-search-bar-border: 2px solid #000;
  --dynamic-search-bar-border-hover: 2px solid #000;
  --dynamic-search-bar-border-focus: 2px solid #000;
  --dynamic-modal-border: 2px solid #000;
  --dynamic-modal-width: 22.5rem;
  --dynamic-modal-padding: 1.5rem;
  --dynamic-footer-padding: 1.25rem 1.25rem 1.25rem 1.5rem;
  --dynamic-footer-border: 2px solid #000;
  --dynamic-wallet-list-tile-padding: 0.75rem;
  --dynamic-wallet-list-tile-gap: 0.375rem;
  --dynamic-wallet-list-max-height: 16.25rem;
  --dynamic-wallet-list-tile-background: #fff;
  --dynamic-wallet-list-tile-border: 2px solid #000000;
  --dynamic-wallet-list-tile-shadow: 0px 3px 0px #fff;
  --dynamic-wallet-list-tile-background-hover: #fff;
  --dynamic-wallet-list-tile-border-hover: 2px solid #000000;
  --dynamic-wallet-list-tile-shadow-hover: 0px 3px 0px #000000;
  --dynamic-connect-button-background: #fff;
  --dynamic-connect-button-color: #000;
  --dynamic-connect-button-border: 2px solid #000;
  --dynamic-connect-button-shadow: 0px 3px 0px #fff;
  --dynamic-connect-button-background-hover: rgba(22, 37, 77, 0.03);
  --dynamic-connect-button-color-hover: #000;
  --dynamic-connect-button-border-hover: 2px solid #000;
  --dynamic-connect-button-shadow-hover: 0px 3px 0px #000000;
  --dynamic-tooltip-color: #000;
  --dynamic-tooltip-text-color: #fff;
}
```

### Theme variables

| Variable                               | Description                  |
| -------------------------------------- | ---------------------------- |
| `--dynamic-base-1`                     | Base 1 color                 |
| `--dynamic-base-2`                     | Base 2 color                 |
| `--dynamic-base-3`                     | Base 3 color                 |
| `--dynamic-base-4`                     | Base 4 color                 |
| `--dynamic-base-5`                     | Base 5 color                 |
| `--dynamic-brand-primary-color`        | Brand primary color          |
| `--dynamic-border-radius`              | Border radius (default 24px) |
| `--dynamic-connection-green`           | Connected status dot         |
| `--dynamic-hover`                      | Hover background color       |
| `--dynamic-error-1`                    | Error text color             |
| `--dynamic-error-2`                    | Error background color       |
| `--dynamic-loading-animation-gradient` | Loading animation gradient   |
| `--dynamic-shadow-down-1`              | Shadow down 1                |
| `--dynamic-shadow-down-2`              | Shadow down 2                |
| `--dynamic-shadow-down-3`              | Shadow down 3                |
| `--dynamic-shadow-up-1`                | Shadow up 1                  |
| `--dynamic-success-1`                  | Success text color           |
| `--dynamic-success-2`                  | Success background color     |

### Text variables

| Variable                               | Description                   |
| -------------------------------------- | ----------------------------- |
| `--dynamic-font-family-primary`        | Font used for general text    |
| `--dynamic-font-family-numbers`        | Font used for number elements |
| `--dynamic-text-primary`               | Primary text color            |
| `--dynamic-text-secondary`             | Secondary text color          |
| `--dynamic-text-tertiary`              | Tertiary text color           |
| `--dynamic-text-link`                  | Link text color               |
| `--dynamic-text-size-body-mini`        | Text size body mini           |
| `--dynamic-text-size-body-small`       | Text size body small          |
| `--dynamic-text-size-body-normal`      | Text size body normal         |
| `--dynamic-text-size-button-primary`   | Text size primary button      |
| `--dynamic-text-size-button-secondary` | Text size secondary button    |
| `--dynamic-text-size-numbers-small`    | Text size small numbers       |
| `--dynamic-text-size-numbers-medium`   | Text size medium numbers      |
| `--dynamic-text-size-numbers-big`      | Text size big numbers         |
| `--dynamic-text-size-title`            | Text size title               |

### Modal variables

| Variable                              | Description               |
| ------------------------------------- | ------------------------- |
| `--dynamic-modal-border`              | Modal border              |
| `--dynamic-modal-width`               | Modal width               |
| `--dynamic-modal-padding`             | Modal padding             |
| `--dynamic-modal-backdrop-background` | Modal backdrop background |
| `--dynamic-modal-backdrop-filter`     | Modal backdrop filter     |

### Footer variables

| Variable                            | Description           |
| ----------------------------------- | --------------------- |
| `--dynamic-footer-background-color` | Background color      |
| `--dynamic-footer-text-color`       | Text color            |
| `--dynamic-footer-icon-color`       | Icon color            |
| `--dynamic-footer-arrow-color`      | Arrow color           |
| `--dynamic-footer-border`           | Top and bottom border |
| `--dynamic-footer-padding`          | Footer padding        |

### Wallet list variables

| Variable                                        | Description                                                    |
| ----------------------------------------------- | -------------------------------------------------------------- |
| `--dynamic-wallet-list-max-height`              | Maximum wallet list height                                     |
| `--dynamic-wallet-list-tile-gap`                | Gap between wallet tiles                                       |
| `--dynamic-wallet-list-tile-padding`            | Wallet tile padding                                            |
| `--dynamic-wallet-list-tile-background`         | Wallet tile background                                         |
| `--dynamic-wallet-list-tile-border`             | Wallet tile border                                             |
| `--dynamic-wallet-list-tile-shadow`             | Wallet tile shadow                                             |
| `--dynamic-wallet-list-tile-background-hover`   | Wallet tile background on hover                                |
| `--dynamic-wallet-list-tile-border-hover`       | Wallet tile border on hover                                    |
| `--dynamic-wallet-list-tile-shadow-hover`       | Wallet tile shadow on hover                                    |
| `--dynamic-wallet-list-tile-animation-duration` | Wallet time animation duration between regular and hover state |
| `--dynamic-badge-background`                    | Wallet tile badge background                                   |
| `--dynamic-badge-color`                         | Wallet tile badge text color                                   |
| `--dynamic-badge-dot-background`                | Wallet tile badge dot background                               |
| `--dynamic-recommended-badge-background`        | Wallet tile recommended badge background                       |
| `--dynamic-recommended-badge-color`             | Wallet tile recommended badge text color                       |
| `--dynamic-search-bar-background`               | Wallet search bar background                                   |
| `--dynamic-search-bar-border`                   | Wallet search bar border                                       |
| `--dynamic-search-bar-background-hover`         | Wallet search bar background on hover                          |
| `--dynamic-search-bar-border-hover`             | Wallet search bar border on hover                              |
| `--dynamic-search-bar-background-focus`         | Wallet search bar background on focus                          |
| `--dynamic-search-bar-border-focus`             | Wallet search bar border on focus                              |

### Connect button variables

| Variable                                    | Description                |
| ------------------------------------------- | -------------------------- |
| `--dynamic-connect-button-background`       | Button background          |
| `--dynamic-connect-button-color`            | Button text color          |
| `--dynamic-connect-button-border`           | Button border              |
| `--dynamic-connect-button-shadow`           | Button shadow              |
| `--dynamic-connect-button-background-hover` | Button background on hover |
| `--dynamic-connect-button-color-hover`      | Button text color on hover |
| `--dynamic-connect-button-border-hover`     | Button border on hover     |
| `--dynamic-connect-button-shadow-hover`     | Button shadow on hover     |
| `--dynamic-connect-button-radius`           | Button border radius       |

### Other variables

| Variable                       | Description                     |
| ------------------------------ | ------------------------------- |
| `--dynamic-overlay`            | Widget connection modal overlay |
| `--dynamic-tooltip-color`      | Tooltip background color        |
| `--dynamic-tooltip-text-color` | Tooltip text color              |

If you wish to customize the UI even more, we recommend using [CSS overrides](/react/using-our-ui/design-customizations/css/custom-css).