Getting Started
Custom Styling
You can customize web3-onboard to match the look and feel of your dapp. web3-onboard exposes css variables for each of its UI components.
Interested in seeing how web3-onboard will look on your site?
It will allow you to customize the look and feel of web3-onboard, try different themes or create your own, and preview how web3-onboard will look on your site by entering a URL or adding a screenshot.
# CSS custom properties (variables)
The Onboard styles can customized via
CSS custom properties. The following properties and their default properties can be customized by adding these variables to the :root in your CSS file:
:root {
/* CUSTOMIZE THE COLOR PALETTE */
--onboard-white: white;
--onboard-black: black;
--onboard-primary-1: #2f80ed;
--onboard-primary-100: #eff1fc;
--onboard-primary-200: #d0d4f7;
--onboard-primary-300: #b1b8f2;
--onboard-primary-400: #929bed;
--onboard-primary-500: #6370e5;
--onboard-primary-600: #454ea0;
--onboard-primary-700: #323873;
--onboard-gray-100: #ebebed;
--onboard-gray-200: #c2c4c9;
--onboard-gray-300: #999ca5;
--onboard-gray-400: #707481;
--onboard-gray-500: #33394b;
--onboard-gray-600: #242835;
--onboard-gray-700: #1a1d26;
--onboard-success-100: #d1fae3;
--onboard-success-200: #baf7d5;
--onboard-success-300: #a4f4c6;
--onboard-success-400: #8df2b8;
--onboard-success-500: #5aec99;
--onboard-success-600: #18ce66;
--onboard-success-700: #129b4d;
--onboard-danger-100: #ffe5e6;
--onboard-danger-200: #ffcccc;
--onboard-danger-300: #ffb3b3;
--onboard-danger-400: #ff8080;
--onboard-danger-500: #ff4f4f;
--onboard-danger-600: #cc0000;
--onboard-danger-700: #660000;
--onboard-warning-100: #ffefcc;
--onboard-warning-200: #ffe7b3;
--onboard-warning-300: #ffd780;
--onboard-warning-400: #ffc74c;
--onboard-warning-500: #ffaf00;
--onboard-warning-600: #cc8c00;
--onboard-warning-700: #664600;
/* CUSTOMIZE ACCOUNT CENTER*/
--account-center-z-index
--account-center-position-top
--account-center-position-bottom
--account-center-position-right
--account-center-position-left
--account-center-minimized-background
--account-center-maximized-upper-background
--account-center-maximized-network-section
--account-center-maximized-app-info-section
--account-center-minimized-address-color
--account-center-maximized-address-color
--account-center-maximized-account-section-background-hover
--account-center-maximized-action-background-hover
--account-center-minimized-chain-select-background
--account-center-network-selector-color
--account-center-maximized-network-selector-color
--account-center-minimized-network-selector-color
--account-center-app-btn-text-color
--account-center-app-btn-background
--account-center-app-btn-font-family
--account-center-border
--account-center-box-shadow
--account-center-border-radius
--account-center-chain-warning
--account-center-minimized-balance-color
--account-center-minimized-chain-select-background
--account-center-maximized-network-section-background
--account-center-maximized-network-text-color
--account-center-maximized-info-section-background-color
--account-center-maximized-upper-action-color
--account-center-maximized-upper-action-background-hover
--account-center-maximized-app-name-color
--account-center-maximized-app-info-color
--account-center-micro-background
/* CUSTOMIZE SECTIONS OF THE CONNECT MODAL */
--onboard-connect-content-width
--onboard-connect-content-height
--onboard-wallet-columns
--onboard-connect-sidebar-background
--onboard-connect-sidebar-color
--onboard-connect-sidebar-progress-background
--onboard-connect-sidebar-progress-color
--onboard-connect-header-background
--onboard-connect-header-color
--onboard-main-scroll-container-background
--onboard-link-color
--onboard-close-button-background
--onboard-close-button-color
--onboard-checkbox-background
--onboard-checkbox-color
--onboard-wallet-button-background
--onboard-wallet-button-background-hover
--onboard-wallet-button-color
--onboard-wallet-button-border-color
--onboard-wallet-button-border-radius
--onboard-wallet-button-box-shadow
--onboard-wallet-app-icon-border-color
/* CUSTOMIZE THE SHARED MODAL */
--onboard-modal-background
--onboard-modal-color
/* CUSTOMIZE THE CONNECT MODAL */
--onboard-modal-border-radius
--onboard-modal-backdrop
--onboard-modal-box-shadow
/* CUSTOMIZE THE ACTION REQUIRED MODAL */
--onboard-action-required-modal-background
/* FONTS */
--onboard-font-family-normal: Inter, sans-serif;
--onboard-font-size-1: 3rem;
--onboard-font-size-2: 2.25rem;
--onboard-font-size-3: 1.5rem;
--onboard-font-size-4: 1.25rem;
--onboard-font-size-5: 1rem;
--onboard-font-size-6: 0.875rem;
--onboard-font-size-7: 0.75rem;
/* SPACING */
--onboard-spacing-1: 3rem;
--onboard-spacing-2: 2rem;
--onboard-spacing-3: 1.5rem;
--onboard-spacing-4: 1rem;
--onboard-spacing-5: 0.5rem;
/* BORDER RADIUS */
--onboard-border-radius-1: 24px;
--onboard-border-radius-2: 20px;
--onboard-border-radius-3: 16px;
/* SHADOWS */
--onboard-shadow-0: none;
--onboard-shadow-1: 0px 4px 12px rgba(0, 0, 0, 0.1);
--onboard-shadow-2: inset 0px -1px 0px rgba(0, 0, 0, 0.1);
/* MAIN MODAL POSITIONING */
--onboard-modal-z-index
--onboard-modal-top
--onboard-modal-bottom
--onboard-modal-right
--onboard-modal-left
/* HD WALLET ACCOUNT SELECT MODAL POSITIONING */
--onboard-account-select-modal-z-index
--onboard-account-select-modal-top
--onboard-account-select-modal-bottom
--onboard-account-select-modal-right
--onboard-account-select-modal-left
/* MAGIC WALLET MODAL POSITIONING */
--onboard-login-modal-z-index
--onboard-login-modal-top
--onboard-login-modal-bottom
--onboard-login-modal-right
--onboard-login-modal-left
/* HARDWARE WALLET STYLES */
/* *if not set will fallback to variables with `--onboard` prefix shown above */
/* COLORS */
--account-select-modal-white: white;
--account-select-modal-black: black;
--account-select-modal-primary-100: #eff1fc;
--account-select-modal-primary-200: #d0d4f7;
--account-select-modal-primary-300: #b1b8f2;
--account-select-modal-primary-500: #6370e5;
--account-select-modal-primary-600: #454ea0;
--account-select-modal-gray-100: #ebebed;
--account-select-modal-gray-200: #c2c4c9;
--account-select-modal-gray-300: #999ca5;
--account-select-modal-gray-500: #33394b;
--account-select-modal-gray-700: #1a1d26;
--account-select-modal-danger-500: #ff4f4f;
/* FONTS */
--account-select-modal-font-family-normal: Inter, sans-serif;
--account-select-modal-font-size-5: 1rem;
--account-select-modal-font-size-7: .75rem;
--account-select-modal-font-line-height-1: 24px;
/* SPACING */
--account-select-modal-margin-4: 1rem;
--account-select-modal-margin-5: 0.5rem;
/* NOTIFY STYLES */
/* Notify Positioning variables only take effect if Notify is Positioned separate of Account Center */
--notify-onboard-container-position-top
--notify-onboard-container-position-bottom
--notify-onboard-container-position-right
--notify-onboard-container-position-left
--notify-onboard-font-family-normal
--notify-onboard-font-size-5
--notify-onboard-gray-300
--notify-onboard-gray-600
--notify-onboard-border-radius
--notify-onboard-font-size-7
--notify-onboard-font-size-6
--notify-onboard-line-height-4
--notify-onboard-primary-100
--notify-onboard-primary-400
--notify-onboard-main-padding
--notify-onboard-z-index
--notify-onboard-background
--notify-onboard-close-icon-color
--notify-onboard-close-icon-hover
--notify-onboard-transaction-status-color
--notify-onboard-transaction-font-size
--notify-onboard-hash-time-font-size
--notify-onboard-hash-time-font-line-height
--notify-onboard-address-hash-color
--notify-onboard-anchor-color
}