> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uifoundations.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS Variables

> Using the latest CSS variables improvements from MUI

UI Foundations Kit adopted the latest CSS variables improvements from MUI to provide a more flexible and customizable theming experience. This sets up your app to support Pigment CSS and build on top of the built-in browser based CSS features of CSS variables.

This means that your app will automatically begin to take advantage of great features like:

* preventing dark/light mode flicker
* unlimited color schemes
* better debugging experience in browser dev tools
* [and more](https://next.mui.com/material-ui/customization/css-theme-variables/overview/)

You can access theme tokens in your components via the theme directly:

```tsx theme={null}
<Button sx={{
  backgroundColor: theme.vars.palette.primary.main, // var(--mui-palette-primary-main)
  color: theme.vars.palette.primary.contrastText, // var(--mui-palette-primary-contrastText)
}}>
  Click me
</Button>
```

Or using regular CSS:

```css styles.css theme={null}
.feature-section {
  background-color: var(--mui-palette-grey-50);
}
```