> ## 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] Recommended: JavaScript SDK with React Hooks
>
> 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)](https://docs.dynamic.xyz/docs/javascript/reference/react-quickstart.md) to get started.

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:

![](https://mintcdn.com/dynamic-docs/1BCvlcqA98E5Wmmq/images/widget/widget-css-variables-example.png?fit=max\&auto=format\&n=1BCvlcqA98E5Wmmq\&q=85\&s=43807433cacc7aa3eb3ff2903e3e7a7e)

```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](https://docs.dynamic.xyz/docs/react/using-our-ui/design-customizations/css/custom-css.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.