CSS Variables

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) to get started.

The Dynamic SDK allows you to customize the theme via CSS variables. 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:

.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

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

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.

Implementation Guides

SDK Reference

Recommended: JavaScript SDK with React Hooks

Theme variables

Text variables

Footer variables

Wallet list variables

Connect button variables

Other variables

Recommended: JavaScript SDK with React Hooks

​Theme variables

​Text variables

​Modal variables

​Footer variables

​Wallet list variables

​Connect button variables

​Other variables

Theme variables

Text variables

Modal variables

Footer variables

Wallet list variables

Connect button variables

Other variables