📘 Must be on SDK v0.15.x

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-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-connection-green-1Connected status dot color
--dynamic-connection-green-2Connected status bg color
--dynamic-border-radiusBorder radius (default 24px)
--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

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-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.