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 { useState } from 'react'
import { useTheme } from './use-theme'

const YourDapp = () => {
  // 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' : ''}`}>
      {/* rest of the UI here */}
    </div>
  )
}

Customisation

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 - https://git.new/elements-themes

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

Comparison between the default light mode and the stride light mode

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 Variable	Description
--primary	Brand's primary colour, utilized for backgrounds of buttons, active links, and similar elements.
--primary-foreground	Text colour designed to contrast with the --primary background, ensuring readability.
--secondary	Secondary colour option, intended for less prominent actions such as settings or navigation buttons.
--secondary-foreground	Foreground colour for text placed over --secondary backgrounds, providing clear visibility.
--background	Background colour for the entire application or site. Typically light to enhance readability.
--foreground	Foreground (text) colour used against the --background. Usually dark for contrast against a light background.
--card	Background colour for card components. Lighter shade for differentiation from the main background.
--card-foreground	Text colour for content within card components, contrasting with --card.
--popover	Background colour for popover elements like tooltips or dropdowns. Similar to --card for consistency.
--popover-foreground	Text colour within popover elements, ensuring legibility against --popover background.
--primary	Represents your brand's primary colour. Used for button backgrounds, active links, etc.
--primary-foreground	Colour for text that's put on an element with --primary background colour.
--secondary	A colour for secondary actions like a settings or a navigation button.
--secondary-foreground	Colour for text that's put on elements with --secondary background colour.
--muted	A softer or more muted colour, possibly for less prominent elements or disabled state.
--muted-foreground	Foreground colour for text or icons against the --muted background, ensuring visibility.
--accent	An accent colour used sparingly to draw attention to specific components or elements.
--accent-foreground	Text colour that contrasts with the --accent background, used within elements like badges or tags.
--success	Colour denoting success, often used for success messages, confirmation icons, etc.
--success-foreground	Text colour for elements with a --success background, ensuring clear visibility.
--destructive	Colour used to denote destructive actions, like delete buttons. Bright to draw attention and caution.
--destructive-foreground	Colour for text on destructive elements, ensuring legibility.
--warning	Warning colour used for alerts and cautionary elements. Bright and noticeable.
--warning-foreground	Text colour against the --warning background for clear legibility in warnings.
--border	Colour used for borders around elements or divisions. Light to subtly define space and boundaries.
--input	Background colour for input fields, often matching --border for consistency in form elements.
--ring	Colour for focus rings around interactive elements, providing accessibility and visual feedback.
--radius	Standard border radius for elements, contributing to the overall design system's feel.
--blur-overlay	Blur intensity for overlay elements, such as modals or backdrop filters.
--font-family	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

.leap-ui.my-dapp-class {
    --font-family: 'Helvetica', 'SF Pro', sans-serif;
}

const YourDapp = () => {
  return (
    <div className={`leap-ui my-dapp-class`}>
      <IBCSwaps />
    </div>
  )
}