# Reusing ThemeBuilder Exported Variables Using CSS

## Environment

<table>
    <tbody>
        <tr>
            <td>Product</td>
            <td>ThemeBuilder</td>
        </tr>
        <tr>
            <td>Product Version</td>
            <td>Any</td>
        </tr>
    </tbody>
</table>

## Description

I want to reuse the variables I have exported from ThemeBuilder in my application. How can I achieve this considering I am [using the CSS output](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package#using-the-compiled-css-themebuilder-output)?

## Solution

To reuse the variables exported from ThemeBuilder in your application using CSS, follow these steps:

1. Check the CSS output for the identifier of the variable you want to reuse:

   ```css
   :root {
       /* ... */
       --tb-example-background: hsl(100deg, 50%, 50%);
       /* ... */
   ```

2. Refer to the desired variable in your application's styles using the following CSS syntax:

   ```css
   .example-element {
       background-color: var(--tb-example-background);
   }
   ```

> note ThemeBuilder applies prefixes, such as the [ThemeBuilder Export prefix](https://www.telerik.com/themebuilder/documentation/knowledge-base/customizing-themebuilder-export-prefix) and the [Figma Plugin prefix](https://www.telerik.com/themebuilder/documentation/knowledge-base/customizing-figma-plugin-prefix), to custom-defined variables. This makes it important to refer to the CSS output to ensure you access the correct variable.

> tip Variables exported from ThemeBuilder are applied to the root element of the document tree using the pseudo-class `:root`. This allows all elements in the application to inherit these variables, and therefore access them.

## Limitations

In ThemeBuilder, Fluent is the only CSS-based theme. For the other themes, such as Default, the custom-defined variables are replaced with plain values in the CSS output during the SASS compilation. In order to access such variables in these themes, use the SCSS output from the [exported package](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package) instead.

## Related Articles

* [Using Variables](https://www.telerik.com/themebuilder/documentation/building-visual-styles/variables)
* [Customizing ThemeBuilder Export Prefix](https://www.telerik.com/themebuilder/documentation/knowledge-base/customizing-themebuilder-export-prefix)
* [Customizing Figma Plugin Prefix](https://www.telerik.com/themebuilder/documentation/knowledge-base/customizing-figma-plugin-prefix)