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