CSS Variables

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.

Getting Started

Security

Core Features

Advanced Usage

Developer Dashboard

Migrations

Wallets & Chains Integration

Hackathons

Theme variables

Text 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

Theme variables

Text variables

Modal variables

Footer variables

Wallet list variables

Connect button variables

Other variables