Customise the UI

We have released v1.0.0 of Elements with an improved UX and developer API. We recommend you to use v1.x. Here's the migration guide for v0.x users.

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.

Theming

The Liquidity 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!

Modifying Existing Themes

We export dark and light themes you can use.

import { darkTheme, lightTheme } from '@leapwallet/elements'

const customDarkTheme = {
    ...darkTheme,
    colors: {
        ...darkTheme.colors,
        primary: '#6366f1',
        primaryButton: '#6366f1',
        primaryButtonText: '#ffffff',
    },
}

Custom Theme

You can even create your own theme from scratch.

import { defaultBlurs, defaultBorderRadii, defaultZIndices } from '@leapwallet/elements'
import '@leapwallet/elements/styles.css'

const customTheme = {
  colors: {
    primary: '#3b82f6',
    primaryButton: '#3b82f6',
    primaryButtonText: '#ffffff',
    text: '#010101',
    textSecondary: '#6b7280',
    border: '#cbd5e1',
    stepBorder: '#cbd5e1',
    alpha: '#f9f9f9',
    gray: '#9ca3af',
    backgroundPrimary: '#f9fafb',
    backgroundSecondary: '#e2e8f0',
    error: '#ef4444',
    errorBackground: '#fef2f2',
    success: '#27caa4',
    successBackground: '#f9fafb',
    warning: '#f59e0b',
    warningBackground: '#FFEDD1'
  },
  zIndices: defaultZIndices,
  borderRadii: defaultBorderRadii,
  blurs: defaultBlurs,
  fontFamily: 'Inter, sans-serif',
}

Theming For Individual Tabs

When you're using individual tabs, you will need to use the theme provider and pass in the theme prop there.

import { ThemeContextProvider } from '@leap-wallet/elements'

const YourDapp = () => {
  return (
    <ThemeContextProvider theme={customTheme}>
      {/* the tab goes here */}
    </ThemeContextProvider>
  )
}

The ThemeContextProvider declares CSS Custom Properties for theming, on the root element of the DOM. If you want to change where the custom properties are defined, you can pass in a customStylesParentSelector prop as follows -

const YourDapp = () => {
  return (
    <div>
      // ... other components
      <div className="elements-sandbox">
        <ThemeContextProvider
          theme={customTheme}
          customStylesParentSelector=".elements-sandbox"
        >
          {/* the tab goes here */}
        </ThemeContextProvider>
      </div>
    </div>
  )
}

Please note, the customStylesParentSelector prop accepts any valid CSS Selector