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
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
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
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 |
---|---|
| Brand's primary colour, utilized for backgrounds of buttons, active links, and similar elements. |
| Text colour designed to contrast with the |
| Secondary colour option, intended for less prominent actions such as settings or navigation buttons. |
| Foreground colour for text placed over |
| Background colour for the entire application or site. Typically light to enhance readability. |
| Foreground (text) colour used against the |
| Background colour for card components. Lighter shade for differentiation from the main background. |
| Text colour for content within card components, contrasting with |
| Background colour for popover elements like tooltips or dropdowns. Similar to |
| Text colour within popover elements, ensuring legibility against |
| Represents your brand's primary colour. Used for button backgrounds, active links, etc. |
| Colour for text that's put on an element with |
| A colour for secondary actions like a settings or a navigation button. |
| Colour for text that's put on elements with |
| A softer or more muted colour, possibly for less prominent elements or disabled state. |
| Foreground colour for text or icons against the |
| An accent colour used sparingly to draw attention to specific components or elements. |
| Text colour that contrasts with the |
| Colour denoting success, often used for success messages, confirmation icons, etc. |
| Text colour for elements with a |
| 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 |
| Colour used for borders around elements or divisions. Light to subtly define space and boundaries. |
| Background colour for input fields, often matching |
| 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
>>> 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
#2 Add an additional selector to the customisations block
Last updated