Comment on page
Customise the UI

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: '#ff9f0a'
  },
  borderRadii: defaultBorderRadii,
  blurs: defaultBlurs,
  zIndices: defaultZIndices,
  fontFamily: 'Inter'
}
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​
Elements - Previous
Tab Config
Next - Elements
Transaction Summary
Last modified 7d ago