CSS Variables
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
| 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-connection-green-1 |
Connected status dot color |
--dynamic-connection-green-2 |
Connected status background color |
--dynamic-border-radius |
Border radius (default 24px) |
--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 |
Shadown down 1 |
--dynamic-shadow-down-2 |
Shadown down 2 |
--dynamic-shadow-down-3 |
Shadown down 3 |
--dynamic-shadow-up-1 |
Shadown up 1 |
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-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 |
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.
Updated 9 days ago