The Dynamic SDK allows you to customize the theme via CSS variables. We recommend setting these CSS variables in your host site by targetting 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

VariableDescription
--dynamic-base-1Base 1 color
--dynamic-base-2Base 2 color
--dynamic-base-3Base 3 color
--dynamic-base-4Base 4 color
--dynamic-base-5Base 5 color
--dynamic-brand-primary-colorBrand primary color
--dynamic-border-radiusBorder radius (default 24px)
--dynamic-connection-greenConnected status dot
--dynamic-hoverHover background color
--dynamic-error-1Error text color
--dynamic-error-2Error background color
--dynamic-loading-animation-gradientLoading animation gradient
--dynamic-shadow-down-1Shadow down 1
--dynamic-shadow-down-2Shadow down 2
--dynamic-shadow-down-3Shadow down 3
--dynamic-shadow-up-1Shadow up 1
--dynamic-success-1Success text color
--dynamic-success-2Success background color

​
Text variables

VariableDescription
--dynamic-font-family-primaryFont used for general text
--dynamic-font-family-numbersFont used for number elements
--dynamic-text-primaryPrimary text color
--dynamic-text-secondarySecondary text color
--dynamic-text-tertiaryTertiary text color
--dynamic-text-linkLink text color
--dynamic-text-size-body-miniText size body mini
--dynamic-text-size-body-smallText size body small
--dynamic-text-size-body-normalText size body normal
--dynamic-text-size-button-primaryText size primary button
--dynamic-text-size-button-secondaryText size secondary button
--dynamic-text-size-numbers-smallText size small numbers
--dynamic-text-size-numbers-mediumText size medium numbers
--dynamic-text-size-numbers-bigText size big numbers
--dynamic-text-size-titleText size title
VariableDescription
--dynamic-modal-borderModal border
--dynamic-modal-widthModal width
--dynamic-modal-paddingModal padding
--dynamic-modal-backdrop-backgroundModal backdrop background
--dynamic-modal-backdrop-filterModal backdrop filter
VariableDescription
--dynamic-footer-background-colorBackground color
--dynamic-footer-text-colorText color
--dynamic-footer-icon-colorIcon color
--dynamic-footer-arrow-colorArrow color
--dynamic-footer-borderTop and bottom border
--dynamic-footer-paddingFooter padding

​
Wallet list variables

VariableDescription
--dynamic-wallet-list-max-heightMaximum wallet list height
--dynamic-wallet-list-tile-gapGap between wallet tiles
--dynamic-wallet-list-tile-paddingWallet tile padding
--dynamic-wallet-list-tile-backgroundWallet tile background
--dynamic-wallet-list-tile-borderWallet tile border
--dynamic-wallet-list-tile-shadowWallet tile shadow
--dynamic-wallet-list-tile-background-hoverWallet tile background on hover
--dynamic-wallet-list-tile-border-hoverWallet tile border on hover
--dynamic-wallet-list-tile-shadow-hoverWallet tile shadow on hover
--dynamic-wallet-list-tile-animation-durationWallet time animation duration between regular and hover state
--dynamic-badge-backgroundWallet tile badge background
--dynamic-badge-colorWallet tile badge text color
--dynamic-badge-dot-backgroundWallet tile badge dot background
--dynamic-recommended-badge-backgroundWallet tile recommended badge background
--dynamic-recommended-badge-colorWallet tile recommended badge text color
--dynamic-search-bar-backgroundWallet search bar background
--dynamic-search-bar-borderWallet search bar border
--dynamic-search-bar-background-hoverWallet search bar background on hover
--dynamic-search-bar-border-hoverWallet search bar border on hover
--dynamic-search-bar-background-focusWallet search bar background on focus
--dynamic-search-bar-border-focusWallet search bar border on focus

​
Connect button variables

VariableDescription
--dynamic-connect-button-backgroundButton background
--dynamic-connect-button-colorButton text color
--dynamic-connect-button-borderButton border
--dynamic-connect-button-shadowButton shadow
--dynamic-connect-button-background-hoverButton background on hover
--dynamic-connect-button-color-hoverButton text color on hover
--dynamic-connect-button-border-hoverButton border on hover
--dynamic-connect-button-shadow-hoverButton shadow on hover
--dynamic-connect-button-radiusButton border radius

​
Other variables

VariableDescription
--dynamic-overlayWidget connection modal overlay
--dynamic-tooltip-colorTooltip background color
--dynamic-tooltip-text-colorTooltip text color

If you wish to customize the UI even more, we recommend using CSS overrides.

Was this page helpful?

Themes & SettingsCustom CSS