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

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.