Using CSS Variables

Customise elements to match your dApps styles.

Default Themes

We're using CSS Variables, aka CSS Custom Properties for the theming system. We ship a light and a dark mode.

For the styles to appear please add leap-ui class to a parent element of any component you use.

For the theme to be applied, you will need to add leap-ui class to a parent element. And to use the dark mode, you'll have to add dark class to the same parent element. Here's an example

import {
  type IBCSwapsProps,
} from '@leapwallet/elements'
import { useState } from 'react'
import { useElementsWalletConfig } from './elements-wallet-config'
import { useTheme } from './use-theme'

import '@leapwallet/elements/styles.css'

const YourDapp = () => {
  const walletClientConfig = useElementsWalletConfig()

  // useTheme is just an example hook to get the current theme
  // let's say the theme variable is 'dark' or 'light'
  const theme = useTheme()

  return (
    <div className={`leap-ui ${theme === 'dark' ? 'dark' : ''}`}>
      <IBCSwaps />


The default themes are great starters, however we give you complete control over the theme. However for most dApps, changing a few theme variables is enough. Let's say we're integrating the swaps modal on the stride app, here's the variables I would change

 * The Stride dApp is in light mode, so we will update .leap-ui declaration
.leap-ui {
   * Stride primary colour is #E50571
   * Convert it to HSL - hsl(331deg, 95.7%, 45.9%)
   * We set the --primary variable to 331 95.7% 45.9%
  --primary: 331 95.7% 45.9%;
   * Primary Foreground colour - white
  --primary-foreground: 0 0% 100%;
   * Ring colour - hsl(323deg, 94.2%, 59.2%)
  --ring: 323 94.2% 59.2%;
   * Background colour - white
  --background: 0 0% 100%;
   * Foreground colour - hsl(331deg, 100%, 11.8%)
  --foreground: 331 100% 11.8%;

Find the full theme for stride and other dApps here -

Let's compare the default light theme and the stride light theme

If you want the UI to look exactly like your dApp, here's all the CSS custom properties that you can modify with their descriptions

CSS VariableDescription


Brand's primary colour, utilized for backgrounds of buttons, active links, and similar elements.


Text colour designed to contrast with the --primary background, ensuring readability.


Secondary colour option, intended for less prominent actions such as settings or navigation buttons.


Foreground colour for text placed over --secondary backgrounds, providing clear visibility.


Background colour for the entire application or site. Typically light to enhance readability.


Foreground (text) colour used against the --background. Usually dark for contrast against a light background.


Background colour for card components. Lighter shade for differentiation from the main background.


Text colour for content within card components, contrasting with --card.


Background colour for popover elements like tooltips or dropdowns. Similar to --card for consistency.


Text colour within popover elements, ensuring legibility against --popover background.


Represents your brand's primary colour. Used for button backgrounds, active links, etc.


Colour for text that's put on an element with --primary background colour.


A colour for secondary actions like a settings or a navigation button.


Colour for text that's put on elements with --secondary background colour.


A softer or more muted colour, possibly for less prominent elements or disabled state.


Foreground colour for text or icons against the --muted background, ensuring visibility.


An accent colour used sparingly to draw attention to specific components or elements.


Text colour that contrasts with the --accent background, used within elements like badges or tags.


Colour denoting success, often used for success messages, confirmation icons, etc.


Text colour for elements with a --success background, ensuring clear visibility.


Colour used to denote destructive actions, like delete buttons. Bright to draw attention and caution.


Colour for text on destructive elements, ensuring legibility.


Warning colour used for alerts and cautionary elements. Bright and noticeable.


Text colour against the --warning background for clear legibility in warnings.


Colour used for borders around elements or divisions. Light to subtly define space and boundaries.


Background colour for input fields, often matching --border for consistency in form elements.


Colour for focus rings around interactive elements, providing accessibility and visual feedback.


Standard border radius for elements, contributing to the overall design system's feel.


Blur intensity for overlay elements, such as modals or backdrop filters.


Primary font family for the application, ensuring a consistent and readable typography across the platform.

Troubleshooting Common Issues

>>> The default styles for elements are not coming up

It's most likely because you haven't added the following CSS import to your app

import '@leapwallet/elements/styles.css'

>>> I have customised the CSS variables, but it doesn't change the theme

This happens due to the cascading nature of CSS. Here's a few solutions (in-order) you should try

#1 Import your customisation styles after element's stylesheets

import '@leapwallet/elements/styles.css'
import './styles/elements-customisations.css'

#2 Add an additional selector to the customisations block {
    --font-family: 'Helvetica', 'SF Pro', sans-serif;
const YourDapp = () => {
  return (
    <div className={`leap-ui my-dapp-class`}>
      <IBCSwaps />

Last updated