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

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

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

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