Comment on page

Theming

Want to change the look and feel of the components? No problem! We have built a theming system that allows you to customise the look and feel of the components to match your brand and dApp.

Custom Theme

The AccountModal component accepts a theme prop. We provide a dark and a light theme out of the box. You can also pass in your own theme object for a custom look!
import { defaultBlurs, defaultBorderRadii } from '@leapwallet/embedded-wallet-sdk-react'
import '@leapwallet/embedded-wallet-sdk-react/styles.css'
const customTheme = {
colors: {
primary: '#3b82f6',
text: '#010101',
textSecondary: '#6b7280',
border: '#cbd5e1',
stepBorder: '#cbd5e1',
alpha: '#f9f9f9',
gray: '#9ca3af',
backgroundPrimary: '#f9fafb',
backgroundSecondary: '#e2e8f0',
error: '#ef4444',
errorBackground: '#fef2f2',
success: '#4ade80',
successBackground: '#f9fafb'
},
borderRadii: defaultBorderRadii,
blurs: defaultBlurs,
fontFamily: 'Space Grotesk'
}