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'
}