Web3-Onboard Docs

Click Color Circles to Set Theme:

--background-color : #ffffff

--text-color : #1a1d26

--border-color : #ebebed

--accent-background : #ebebed

--accent-color : #929bed

--accent-color-hover : #eff1fc

--secondary-text-color : #707481

:root {
  --background-color: #ffffff; 
  --text-color: #1a1d26; 
  --border-color: #ebebed; 
  --accent-background: #ebebed; 
  --accent-color: #929bed; 
  --accent-color-hover: #eff1fc; 
  --secondary-text-color: #707481; 
  --onboard-connect-sidebar-background: var(--accent-background);
  --onboard-close-button-background: var(--accent-background);
  --onboard-connect-sidebar-color: var(--text-color);
  --onboard-connect-sidebar-progress-background: var(--secondary-text-color);
  --onboard-connect-sidebar-progress-color: var(--accent-color);
  --onboard-connect-header-background: var(--background-color);
  --onboard-connect-header-color: var(--text-color);
  --onboard-main-scroll-container-background: var(--background-color);
  --onboard-link-color: var(--accent-color);
  --onboard-wallet-button-background: var(--background-color);
  --onboard-wallet-button-background-hover: var(--accent-color-hover);
  --onboard-wallet-button-border-color: var(--border-color);
  --onboard-wallet-app-icon-border-color: var(--border-color);
}

Disabled Backdrop for Styling

Enter your website url or drag and drop a screenshot to preview web3-onboard on your site

Drag and drop an image here to preview