> For the complete documentation index, see [llms.txt](https://docs.leapwallet.io/cosmos/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.leapwallet.io/cosmos/elements/theming/using-css-variables.md).

# 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.

{% hint style="warning" %}
For the styles to appear please add `leap-ui` class to a parent element of any component you use.
{% endhint %}

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

```tsx
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

```css
/*
 * 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%;
}
```

{% hint style="info" %}
Find the full theme for stride and other dApps here - <https://git.new/elements-themes>
{% endhint %}

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

<figure><picture><source srcset="/files/ORvpeRVetzC99Rcacc4c" media="(prefers-color-scheme: dark)"><img src="https://897927660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrOZ4nLnlAQp8G5goWQ1X%2Fuploads%2FKEkNmgWlAFlAcBMuIiJZ%2FStride%20Comparison%20Light%20-%202.png?alt=media&amp;token=6015ce47-186b-4872-a7b8-d3acbd053afe" alt=""></picture><figcaption><p>Comparison between the default light mode and the stride light mode</p></figcaption></figure>

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

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

### 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

```jsx
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](https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade). Here's a few solutions (in-order) you should try

*#1* Import your customisation styles after element's stylesheets

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

*#2* Add an additional selector to the customisations block

<pre class="language-css"><code class="lang-css"><strong>.leap-ui.my-dapp-class {
</strong>    --font-family: 'Helvetica', 'SF Pro', sans-serif;
}
</code></pre>

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