CSS & Themes
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 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
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.
Was this page helpful?