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